Afficher des markers depuis des données bdd

Version imprimable

Bonjour,

Pour un projet personnel, j'ai créer une carte google mapp en utilisant l'api Google mapp v3 et je me retrouve face à un problème.

En gros je veux créer plusieurs Marker sur la carte et tous de manière automatique. Je m'explique un utilisateur peut créer un "Event" en mettant le nom de la ville. le nom de la ville est encoder et me renvoie la latitude et le longitude que je stock dans ma bdd. Jusque la ça joue.

Ensuite il faut qu'une personne qui affiche la carte voit tous le marqueur créer par le formulaire. Et la ça ne joue pas. ça m'affiche un marque de ma position automatiquement ( c'est normal) mais pas les autre marqueurs :
Code:

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 <script type="text/javascript"> function initialize() { map = new google.maps.Map(document.getElementById("map_canvas"), { zoom: 9, center: new google.maps.LatLng(48.858565, 4.347198), mapTypeId: google.maps.MapTypeId.HYBRID }); } if (navigator.geolocation) var watchId = navigator.geolocation.watchPosition(successCallback, null, {enableHighAccuracy:true}); else alert("Votre navigateur ne prend pas en compte la géolocalisation HTML5"); function successCallback(position){ map.panTo(new google.maps.LatLng(position.coords.latitude, position.coords.longitude)); var marker = new google.maps.Marker({ position: new google.maps.LatLng(position.coords.latitude, position.coords.longitude), map: map }); } var bounds = new google.maps.LatLngBounds(); function addMarker(lat, lng) { var pt = new google.maps.LatLng(lat, lng); bounds.extend(pt); var marker = new google.maps.Marker({ position: pt, map: map }); } <?php $req = $bdd->prepare('SELECT * FROM event '); $req->execute(); while ($row = $req->fetch()){ $lat=$row['latitude']; $lon=$row['longitude']; echo ("addMarker($lat, $lon)\n"); } ?> </script> </head> <body onload="initialize()" >
Il y a du code php de la ligne 44 à 52

Firebug me donne l'indication suivante :
ReferenceError: map is not defined

map: map

Auriez-vous des conseils ou autre pour résoudre ce bug ?

Merci d'avance,

Tchoune
Ps : Pardon si je post au mauvais endroit, merci de me déplacer

16/12/2013, 15h35
Celira

A mon avis le problème est plutôt au niveau du JS.
Peut-on avoir le code source généré correspondant ?

Bonjour,
Alors voici le code source de la page depuis Firefox :

Code:

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
<!--
*
* Auteur : Perret Yannick
* Date : aout 2013
-->
 
<!DOCTYPE html>
<html>
<head>
  <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
  <style type="text/css">
    html { height: 100% }
    body { height: 100%; margin: 0px; padding: 0px }
    #map_canvas { height: 97% ; width:100%;}
  </style>
 
  <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true"></script>
 <script type="text/javascript">
  function initialize() {
  map = new google.maps.Map(document.getElementById("map_canvas"), {
        zoom: 9,
        center: new google.maps.LatLng(48.858565, 4.347198),
        mapTypeId: google.maps.MapTypeId.HYBRID
      });  
}
 
 
if (navigator.geolocation)
  var watchId = navigator.geolocation.watchPosition(successCallback,
                            null,
                            {enableHighAccuracy:true});
else
  alert("Votre navigateur ne prend pas en compte la géolocalisation HTML5");   
 
function successCallback(position){
  map.panTo(new google.maps.LatLng(position.coords.latitude, position.coords.longitude));
  var marker = new google.maps.Marker({
    position: new google.maps.LatLng(position.coords.latitude, position.coords.longitude),
    map: map
  });
 }
 var bounds = new google.maps.LatLngBounds();
 function addMarker(lat, lng) {
        var pt = new google.maps.LatLng(lat, lng);
        bounds.extend(pt);
        var marker = new google.maps.Marker({
        position: pt,
   map: map
 });
 }
 addMarker(6.5344015, 46.7249203)
addMarker(6.6414898, 46.7782175)
addMarker(6.6335971, 46.5199617)
addMarker(6.2340622, 46.3881817)
addMarker(6.6335971, 46.5199617)
addMarker(6.6335971, 46.5199617)
addMarker(6.6335971, 46.5199617)
addMarker(6.5344015, 46.7249203)
addMarker(6.6335971, 46.5199617)
addMarker(6.2340622, 46.3881817)
addMarker(6.5344015, 46.7249203)
addMarker(6.2340622, 46.3881817)
addMarker(6.7450389, 46.7982374)
 
</script>
 
</head>
<body onload="initialize()" >
 
	
<div id='cssmenu'>
<ul>
   <li><a href='index.php'><span>Accueil</span></a></li>
 
   <li class='has-sub'><a href='event.php'><span>Evénement</span></a>
      <ul>
         <li><a href='event.php?action=1'><span>Ajouter un événement</span></a></li>
         <li><a href='event.php?action=2'><span>Rechercher un événement</span></a></li>
         <li class='last'><a href='mapp.php'><span>Le carte </span></a></li>
      </ul>
 
   </li> <li><a href='connexion.php'><span>Se connecter</span></a></li><li><a href='inscription.php'><span>S'inscrire</span></a></li>  <li><a href='about.php'><span>A propos</span></a></li>
 
    <li class='last'><a href='contact.php'><span>Contact</span></a></li>
 
	</ul>
</div>
<br> <br>	
  <div id="map_canvas"></div>

	</body>
</html>

Et pour Firebug dans console => erreur :

Citation:

ReferenceError: map is not defined

map: map

Voilà, merci d'avance pour votre aide.

17/12/2013, 10h17
Celira

Hum... vu l'erreur, je pense que le problème est plutôt du côté du JS. On va donc transférer le problème là-bas ;)

Sinon, au hasard, il ne faudrait pas des point-virgules après les appels à addMarker ?
17/12/2013, 10h40
Neox666

D'accord merci.
Alors j'ai mis un ; aucune différence il me dis toujours que mapp n'est pas initialisé alors que je l'utilise plus haut dans le code.

On m'a parler de mettre toutes les données de la bdd dans un fichier XMl de le parser et d'envoyer les données au Javascript. Je ne sais pas du tous faire ça, donc je voudrais savoir si sa peut être une bonne possibilité ?

Bonjour,
tu ne pas utiliser ta map avant qu'elle ne soit crée, et elle l'est sur le load de ta page alors que tes appels à addMarker le sont tout de suite au chargement de la page.

Déplace ces appels dans ta fonction initialize

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
function initialize() {
    map = new google.maps.Map(document.getElementById("map_canvas"), {
        zoom: 9,
        center: new google.maps.LatLng(48.858565, 4.347198),
        mapTypeId: google.maps.MapTypeId.HYBRID
    });
    // ICI la map existe
    addMarker(6.5344015, 46.7249203);
    addMarker(6.6414898, 46.7782175);
    addMarker(6.6335971, 46.5199617);
    addMarker(6.2340622, 46.3881817);
    addMarker(6.6335971, 46.5199617);
    addMarker(6.6335971, 46.5199617);
    addMarker(6.6335971, 46.5199617);
    addMarker(6.5344015, 46.7249203);
    addMarker(6.6335971, 46.5199617);
    addMarker(6.2340622, 46.3881817);
    addMarker(6.5344015, 46.7249203);
    addMarker(6.2340622, 46.3881817);
    addMarker(6.7450389, 46.7982374);
}

tu gagnerais aussi à passer par une boucle.

D'accord génial sa ne m'affiche plus d'erreur. Mais il me reste toujours un problème sa n'affiche toujours pas les autres markers. J'ai toujours le premier celui de ma positions, mais pas ceux provenant de la bdd. Pourtant dans la fonction addMarker il contient toutes les données provenant de la bdd sans les afficher sur la mapp.
Si quelqu'un à une solution : je vous met le code que j'ai :

Code:

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
<?php 
 /*inclusion des fonctions et start des sessions*/
	include('/include/function.php');
    session_start();
 
	$bdd = connexionbdd();
?>
<!DOCTYPE html>
<html>
<head>
  <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
  <style type="text/css">
    html { height: 100% }
    body { height: 100%; margin: 0px; padding: 0px }
    #map_canvas { height: 97% ; width:100%;}
  </style>
 
  <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true"></script>
 <script type="text/javascript">
  function initialize() {
  map = new google.maps.Map(document.getElementById("map_canvas"), {
        zoom: 9,
        center: new google.maps.LatLng(48.858565, 4.347198),
        mapTypeId: google.maps.MapTypeId.HYBRID
      }); 
 
 
<?php
 	$req = $bdd->prepare('SELECT * FROM event ');
	$req->execute();
	while ($row = $req->fetch()){
            $lat=$row['latitude'];
            $lon=$row['longitude'];
            echo ("addMarker($lat, $lon);\n");
            }
            ?>
 
}
 
 
if (navigator.geolocation)
  var watchId = navigator.geolocation.watchPosition(successCallback,
                            null,
                            {enableHighAccuracy:true});
else
  alert("Votre navigateur ne prend pas en compte la géolocalisation HTML5");   
 
function successCallback(position){
  map.panTo(new google.maps.LatLng(position.coords.latitude, position.coords.longitude));
  var marker = new google.maps.Marker({
    position: new google.maps.LatLng(position.coords.latitude, position.coords.longitude),
    map: map
  });
 }
 
	  var bounds = new google.maps.LatLngBounds();
 function addMarker(lat, lng) {
	var pt = new google.maps.LatLng(lat, lng);
	bounds.extend(pt);
	var marker = new google.maps.Marker({
	position: pt,
   map: map
 });
 }
 
 
</script>
 
</head>
<body onload="initialize()" >
 
<?php
	include('menu.php');
 
 
 
		/*while ($donnee = $req->fetch())
		{
			echo'<script type="text/javascript"> 
				createPoint('.$donnee['longitude'].', '.$donnee['latitude'].');</script>';
		}*/
	?>
 
  <div id="map_canvas"></div>
<?php
 
		include('footer.php');
	?>

18/12/2013, 18h40
NoSmoking

Le conseil que je peux te donner est de regarder le code HTML généré par le PHP.