Affichage des marqueurs sur une carte à partir d'une base de donnée

**sigway** · 16/10/2012, 03h35

Bonjour,

J'essaie d'afficher des marqueurs sur une carte à partir d'une base de données.
J'ai suivi le tutoriel suivant: http://tips4php.net/2010/10/use-php-...g-data-on-map/ et je l'ai adapté à ma base de données.
Le problème c'est que je ne vois pas de marqueur quand j'exécute ce code.

Ci-joint le code, la table mysql s'appelle appreciation et contient une colonne latitudes et une autre colonne longitude et un colonne idAppreciation :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
<?
             $dbname            ='survey'; //Name of the database
             $dbuser            ='root'; //Username for the db
             $dbpass            =''; //Password for the db
             $dbserver          ='localhost'; //Name of the mysql server
 
             $dbcnx = mysql_connect ("$dbserver", "$dbuser", "$dbpass");
             mysql_select_db("$dbname") or die(mysql_error());
          ?>
          <?
            $query = mysql_query("SELECT * FROM appreciation");
            while ($row = mysql_fetch_array($query)){
            $name=$row['idAppreciation'];
            $lat=$row['latitude'];
            $lon=$row['longitude'];
            $desc=$row['zone'];
            echo ("addMarker($lat, $lon,'<b>$name</b><br/>$desc');\n");
            }
            ?>
           <html>
           <head>
            <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
           <title>Google Map API V3 with markers</title>
          <style type="text/css">
           body { font: normal 10pt Helvetica, Arial; }
          #map { width: 350px; height: 300px; border: 0px; padding: 0px; }
           </style>
          <script src="http://maps.google.com/maps/api/js?v=3&sensor=false"                  type="text/javascript"></script>
            <script type="text/javascript">
 //Sample code written by August Li
 var icon = new google.maps.MarkerImage("http://maps.google.com/mapfiles/ms/micons/blue.png",
 new google.maps.Size(32, 32), new google.maps.Point(0, 0),
 new google.maps.Point(16, 32));
 var center = null;
 var map = null;
 var currentPopup;
 var bounds = new google.maps.LatLngBounds();
 function addMarker(lat, lng, info) {
 var pt = new google.maps.LatLng(lat, lng);
 bounds.extend(pt);
 var marker = new google.maps.Marker({
 position: pt,
 icon: icon,
 map: map
 });
 var popup = new google.maps.InfoWindow({
 content: info,
 maxWidth: 300
 });
 google.maps.event.addListener(marker, "click", function() {
 if (currentPopup != null) {
 currentPopup.close();
 currentPopup = null;
 }
 popup.open(map, marker);
 currentPopup = popup;
 });
 google.maps.event.addListener(popup, "closeclick", function() {
 map.panTo(center);
 currentPopup = null;
 });
 }
 function initMap() {
 map = new google.maps.Map(document.getElementById("map"), {
 center: new google.maps.LatLng(0, 0),
 zoom: 14,
 mapTypeId: google.maps.MapTypeId.ROADMAP,
 mapTypeControl: false,
 mapTypeControlOptions: {
 style: google.maps.MapTypeControlStyle.HORIZONTAL_BAR
 },
 navigationControl: true,
 navigationControlOptions: {
 style: google.maps.NavigationControlStyle.SMALL
 }
 });
 
 center = bounds.getCenter();
 map.fitBounds(bounds);
 
 }
 </script>
 </head>
 <body onload="initMap()" style="margin:0px; border:0px; padding:0px;">
 <div id="map"></div>
 </html>

**Mohamed_DEV** · 16/10/2012, 12h31

Bonjour,

c'est parce que tu fais appel à la fonction

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

echo ("addMarker($lat, $lon,'<b>$name</b><br/>$desc');\n");

Avant qu'elle soit créée, déplace ce code

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
          <?
            $query = mysql_query("SELECT * FROM appreciation");
            while ($row = mysql_fetch_array($query)){
            $name=$row['idAppreciation'];
            $lat=$row['latitude'];
            $lon=$row['longitude'];
            $desc=$row['zone'];
            echo ("addMarker($lat, $lon,'<b>$name</b><br/>$desc');\n");
            }
            ?>

juste avant la balise </script>

**sigway** · 16/10/2012, 12h44

Merci beaucoup pour ta réponse. Cependant quand le code devient :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
<?
$dbname            ='survey'; //Name of the database
$dbuser            ='root'; //Username for the db
$dbpass            =''; //Password for the db
$dbserver          ='localhost'; //Name of the mysql server
 
$dbcnx = mysql_connect ("$dbserver", "$dbuser", "$dbpass");
mysql_select_db("$dbname") or die(mysql_error());
?>
 
<html>
 <head>
 <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
 <title>Google Map API V3 with markers</title>
 <style type="text/css">
 body { font: normal 10pt Helvetica, Arial; }
 #map { width: 350px; height: 300px; border: 0px; padding: 0px; }
 </style>
 <script src="http://maps.google.com/maps/api/js?v=3&sensor=false" type="text/javascript"></script>
 <script type="text/javascript">
 //Sample code written by August Li
 var icon = new google.maps.MarkerImage("http://maps.google.com/mapfiles/ms/micons/blue.png",
    new google.maps.Size(32, 32), new google.maps.Point(0, 0),
    new google.maps.Point(16, 32));
 var center = null;
 var map = null;
 var currentPopup;
 var bounds = new google.maps.LatLngBounds();
 function addMarker(lat, lng, info) {
    var pt = new google.maps.LatLng(lat, lng);
    bounds.extend(pt);
    var marker = new google.maps.Marker({
       position: pt,
       icon: icon,
       map: map
    });
    var popup = new google.maps.InfoWindow({
       content: info,
       maxWidth: 300
    });
    google.maps.event.addListener(marker, "click", function() {
       if (currentPopup != null) {
          currentPopup.close();
          currentPopup = null;
       }
       popup.open(map, marker);
       currentPopup = popup;
    });
    google.maps.event.addListener(popup, "closeclick", function() {
       map.panTo(center);
       currentPopup = null;
    });
 }
 function initMap() {
    map = new google.maps.Map(document.getElementById("map"), {
       center: new google.maps.LatLng(0, 0),
       zoom: 14,
       mapTypeId: google.maps.MapTypeId.ROADMAP,
       mapTypeControl: false,
       mapTypeControlOptions: {
          style: google.maps.MapTypeControlStyle.HORIZONTAL_BAR
       },
       navigationControl: true,
       navigationControlOptions: {
          style: google.maps.NavigationControlStyle.SMALL
       }
    });
 
    center = bounds.getCenter();
    map.fitBounds(bounds);
 
 }
 <?php
                 $query = mysql_query("SELECT * FROM appreciation");
                 while ($row = mysql_fetch_array($query)){
                 $name=$row['idAppreciation'];
                 $lat=$row['latitude'];
                 $lon=$row['longitude'];
                 $desc=$row['zone'];
                 echo ("addMarker($lat, $lon,'<b>$name</b><br/>$desc');\n");
                 }
                 ?>
 </script>
 </head>
 <body onload="initMap()" style="margin:0px; border:0px; padding:0px;">
 <div id="map"></div>
 </html>

J'espère que c'est la correction que vous avez proposé, je ne vois plus rien sur la carte et quand j'inspecte l'élément avec google chrome je reçois les erreurs suivantes :

Uncaught SyntaxError: Unexpected token <
Uncaught ReferenceError: initMap is not defined

Merci pour votre aide, j'en ai vraiment besoin.

**Mohamed_DEV** · 16/10/2012, 13h02

oups, fallait plutot le mettre ici

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
 
<?php
$query = mysql_query("SELECT * FROM appreciation");
while ($row = mysql_fetch_array($query)){
$name=$row['idAppreciation'];
$lat=$row['latitude'];
$lon=$row['longitude'];
$desc=$row['zone'];
echo "addMarker($lat, $lon,'<b>$name</b><br/>$desc');";
}
?>
 
center = bounds.getCenter();
map.fitBounds(bounds);

**sigway** · 16/10/2012, 13h24

Le problème persiste. Plus de carte et les deux erreurs quand j'inspecte l'élément dans google chrome :

#

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
Uncaught SyntaxError: Unexpected token <                  test3.jsp:68
Uncaught ReferenceError: initMap is not defined             test3.jsp:86
onload

**Mohamed_DEV** · 16/10/2012, 14h05

je vois que t'es en jsp, ça marche php avec jsp ?

**sigway** · 16/10/2012, 14h58

oui ça marche

**Mohamed_DEV** · 16/10/2012, 17h05

Essais avec ça, sans rien modifier

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
 
 
<html>
    <head>
        <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
        <title>Google Map API V3 with markers</title>
        <style type="text/css">
            body { font: normal 10pt Helvetica, Arial; }
            #map { width: 350px; height: 300px; border: 0px; padding: 0px; }
        </style>
        <script src="http://maps.google.com/maps/api/js?v=3&sensor=false" type="text/javascript"></script>
        <script type="text/javascript">
            //Sample code written by August Li
            var icon = new google.maps.MarkerImage("http://maps.google.com/mapfiles/ms/micons/blue.png",
                       new google.maps.Size(32, 32), new google.maps.Point(0, 0),
                       new google.maps.Point(16, 32));
            var center = null;
            var map = null;
            var currentPopup;
            var bounds = new google.maps.LatLngBounds();
            function addMarker(lat, lng, info) {
                var pt = new google.maps.LatLng(lat, lng);
                bounds.extend(pt);
                var marker = new google.maps.Marker({
                    position: pt,
                    icon: icon,
                    map: map
                });
                var popup = new google.maps.InfoWindow({
                    content: info,
                    maxWidth: 300
                });
                google.maps.event.addListener(marker, "click", function() {
                    if (currentPopup != null) {
                        currentPopup.close();
                        currentPopup = null;
                    }
                    popup.open(map, marker);
                    currentPopup = popup;
                });
                google.maps.event.addListener(popup, "closeclick", function() {
                    map.panTo(center);
                    currentPopup = null;
                });
            }
            function initMap() {
                map = new google.maps.Map(document.getElementById("map"), {
                    center: new google.maps.LatLng(0, 0),
                    zoom: 14,
                    mapTypeId: google.maps.MapTypeId.ROADMAP,
                    mapTypeControl: false,
                    mapTypeControlOptions: {
                    style: google.maps.MapTypeControlStyle.HORIZONTAL_BAR
                    },
                    navigationControl: true,
                    navigationControlOptions: {
                     style: google.maps.NavigationControlStyle.SMALL
                    }
                });
                <?php // loading makers from database	
		            $dbname            ='survey'; //Name of the database
		            $dbuser            ='root'; //Username for the db
		            $dbpass            =''; //Password for the db
		            $dbserver          ='localhost'; //Name of the mysql server
 
		            $dbcnx = mysql_connect ("$dbserver", "$dbuser", "$dbpass");
		            mysql_select_db($dbname) or die(mysql_error());
 
		            $query = mysql_query("SELECT * FROM appreciation");
		            while ($row = mysql_fetch_array($query))
		            {
			            $name=$row['idAppreciation'];
			            $lat=$row['latitude'];
			            $lon=$row['longitude'];
			            $desc=$row['zone'];
			            echo "addMarker($lat, $lon,'<b>$name</b><br/>$desc');";
			        }
		        ?>    	
	                /*
	                addMarker(51.514980, -0.144328,'<b>100 Club</b><br/>Oxford Street, London  W1&lt;br/&gt;3 Nov 2010 : Buster Shuffle&lt;br/&gt;');
					addMarker(51.521710, -0.071737,'<b>93 Feet East</b><br/>150 Brick Lane, London  E1 6RU&lt;br/&gt;7 Dec 2010 : Jenny &amp; Johnny&lt;br/&gt;');
					addMarker(51.511010, -0.120140,'<b>Adelphi Theatre</b><br/>The Strand, London  WC2E 7NA&lt;br/&gt;11 Oct 2010 : Love Never Dies');
					addMarker(51.521620, -0.143394,'<b>Albany, The</b><br/>240 Gt. Portland Street, London  W1W 5QU');
					addMarker(51.513170, -0.117503,'<b>Aldwych Theatre</b><br/>Aldwych, London  WC2B 4DF&lt;br/&gt;11 Oct 2010 : Dirty Dancing');
					addMarker(51.596490, -0.109514,'<b>Alexandra Palace</b><br/>Wood Green, London  N22&lt;br/&gt;30 Oct 2010 : Lynx All-Nighter');
					*/
                	center = bounds.getCenter();
                	map.fitBounds(bounds);
 
            }
        </script>
    </head>
    <body onload="initMap()" style="margin:0px; border:0px; padding:0px;">
        <div id="map"></div>
		<br/>
		<br/>
		<a href="http://tips4php.net/2010/10/use-php-mysql-and-google-map-api-v3-for-displaying-data-on-map/">Back to Use PHP and Mysql for displaying data on Google maps</a>
</body>
</html>

**sigway** · 16/10/2012, 17h30

non ça ne marche pas il n'y a ni carte ni marqueurs:

le même message qu'avant :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
Uncaught SyntaxError: Unexpected token < test3.jsp:60
Uncaught ReferenceError: initMap is not defined test3.jsp:93
onload

**Mohamed_DEV** · 16/10/2012, 17h37

remplace

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

$query = mysql_query("SELECT * FROM appreciation");

par

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

$query = mysql_query("SELECT * FROM appreciation") or die(mysql_error());

L'erreur vient surement de ta requette

**sigway** · 16/10/2012, 19h53

je suis désolée mais ça marche pas encore

le problème c'est que quand je fait monter le code php en haut près des autres balises php j'ai l'affichage de la carte sans les marqueurs.
Quand je fais descendre les balises php de la requête à l’intérieur de la balise script la carte mm disparait

**NoSmoking** · 17/10/2012, 20h00

Bonjour,
il serait peut être intéressant que tu regardes le code HTML généré, il devrait te permettre de voir où les erreurs se trouvent.

En tout état de cause ton code doit se trouver dans la fonction initMap()

**sigway** · 17/10/2012, 21h49

Salut,

Je ne comprends pas ce que vous voulez dire par le code HTML généré.
Pouvez-vous expliquer d'avantage ?
Ce problème me tourmente depuis une semaine,
merci.

**NoSmoking** · 20/10/2012, 14h43

Le PHP génère du texte dans le document côté serveur et c'est ce document qui est utilisé par le navigateur, donc côté client, pour afficher la page et le reste.

le code suivant

Code php :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
<?php
$user = "untel";
echo $user; 
?>

donnera dans la page un simple

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

untel

Il s'agit donc d'observer le code HTML ainsi généré pour souvent voir les erreurs faites côté serveur.

A partir du code généré il sera également plus facile aux personnes souhaitant t'apporter leur aide de mieux cerner les sources d'erreur, donc c'est celui ci qu'il faut mettre dans tes messages.

**sigway** · 22/10/2012, 01h26

Voici ce qu'il renvoi :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
$name
$desc');\n"); } ?>

**sigway** · 22/10/2012, 13h13

Merci beaucoup.

C'est grâce à votre réponse que j'ai pu résoudre le problème.
L'erreur est que je copiais le code dans la page jsp, normalement j'aurais du l'enregistrer totalement dans un fichier php.
Maintenant je veux appeler ce fichier php dans une page jsp car je veux insérer cette carte dans une page.
Comment faire ?

Merci pour votre aide.

**NoSmoking** · 22/10/2012, 18h49

Maintenant je veux appeler ce fichier php dans une page jsp car je veux insérer cette carte dans une page.
Comment faire ?

- le plus simple c'est quand même de commencer par

http://www.developpez.com/recherche/...&sa=Rechercher
- et ensuite, en cas de problème, faire la demande dans le bon forum.

Affichage des marqueurs sur une carte à partir d'une base de donnée [Google Maps]

APIs Google

Discussions similaires

Partager

Partager