Discussion :

[hbhhhbhh]

Bonjour,

J'ai un problème au niveau de l'affichage de mes markers sur Google Maps.
Il s'affichent bien lorsque je les passe par latitude/longitude mais il ne s'affichent pas lorsque je les passe par adresse
(cf. géocode: http://code.google.com/intl/fr/apis/.../services.html )

Voici mon code:

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
   1. function load() {
   2.       if (GBrowserIsCompatible()) {
   3.         var map = new GMap2(document.getElementById("map" ));
   4.         map.addControl(new GSmallMapControl());
   5.         map.addControl(new GMapTypeControl());
   6.         map.setCenter(new GLatLng(48.7, 2.3), 8);
   7.
   8.     function creerMarker(point, onglet1, onglet2) {
   9.       var marker = new GMarker(point);
  10.       var infoTabs = [
  11.         new GInfoWindowTab("Infos", onglet1),
  12.         new GInfoWindowTab("Détails", onglet2)
  13.         ];
  14.       GEvent.addListener(marker, "click", function() {
  15.         marker.openInfoWindowTabsHtml(infoTabs);
  16.         });
  17.       return marker;
  18.       }
  19.
  20.         GDownloadUrl("donnees.xml", function(data) {
  21.           var xml = GXml.parse(data);
  22.           var markers = xml.documentElement.getElementsByTagName("marker" );
  23.           for (var i = 0; i < markers.length; i++) {
  24.             //var point = new GLatLng(parseFloat(markers[i].getAttribute("lat" )), parseFloat(markers[i].getAttribute("lng" )), 9);  
  25.             //=> fonctionne!
  26.                        
  27.               var geocoder = new google.maps.ClientGeocoder();
  28.               geocoder.getLatLng(adresse, function (coord)
  29.               {
  30.                   map.setCenter(coord, 15);
  31.                   marker1 = creerMarker(coord,markers[i].getAttribute("info" ), markers[i].getAttribute("details" ));
  32.                   map.addOverlay(marker1);
  33.               }); //ne fonctionne pas!
  34.             var marker = creerMarker(coord, markers[i].getAttribute("info" ), markers[i].getAttribute("details" ) );
  35.             map.addOverlay(marker);
  36.           }
  37.         });
  38.       }
  39.     }

merci d'avance

[Bovino]

Pourrais-tu montrer un exemple d'adresse que tu passes ?
Car le format de celle-ci est particulièrement important au risque d'avoir de grosses surprise. (Par exemple, rechercher "75000 france" te renverras... à Lannemezan, près de Tarbes !)

[hbhhhbhh]

Je passe des adresses complètes :
ex:
46 rue oberkampf 75011 paris.

Mais les markers ne s'affichent pas du tout

[Bovino]

Il ne faut pas d'espaces dans l'adresse, il faut les remplacer par des "+" :
46+rue+oberkampf+75011+paris

[hbhhhbhh]

Ben... quand je passe l'adresse en dur avec des espaces, ça fonctionne bien.
Mais quand je lui envoie les adresses du fichier xml (récupérées dans la BDD), ça ne fonctionne pas.

[hbhhhbhh]

Je vous fais part de la solution que j'ai (enfin) trouvé.

Ce code permet d'intégrer une carte google maps dans un site web,
de créer des markers avec 2 onglets dont les valeurs viennent d'une BDD via un fichier XML.
(je stocke les valeurs de la BDD dans un fichier XML (en attribut).)
De plus, j'utilise le géocoding, câd que je n'utilise pas les coordonnées latitude/longitude mais des adresses.

PARTIE JAVASCRIPT:

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
 
<script type="text/javascript"> 
     //<![CDATA[ 
     var geocoder = null; 	   
     function load() 
	 { 
       if (GBrowserIsCompatible()) 
	   { 
            var map = new GMap2(document.getElementById("map")); 
            map.addControl(new GMapTypeControl()); // Différentes vues (plan, satellite, mixte)
            map.addMapType(G_PHYSICAL_MAP);        // Ajout de la vue en "Relief" 
            map.addMapType(G_SATELLITE_3D_MAP);    // Ajout de la vue "Google Earth"
            map.setMapType(G_HYBRID_MAP);          // Forcer sur vue "mixte"
            map.addControl(new GLargeMapControl3D());  // Zoom large 3D
            map.addControl(new GOverviewMapControl()); // Vue d'ensemble
            map.enableScrollWheelZoom();           // Activation du zoom avec la souris
            map.addControl(new GScaleControl());   // Echelle
 
            geocoder = new GClientGeocoder(); // Géocoding
 
          function showAddress(address, onglet1, onglet2)   // Fonction permettant de créer des markers en fonctions des adresses
          {
            if (geocoder)
            {
              geocoder.getLatLng(address, function(point)
              {
                if (!point) {alert(address + " not found");} // Adresse non connue par Google Maps
                else {
                  map.setCenter(point, 13);         // Recentrage de la carte sur l'adresse
                  var marker = new GMarker(point);  // Initialisation d'un marker
                  map.addOverlay(marker);           // Affichage du marker
                  var infoTabs = [ 
			         new GInfoWindowTab("Adresse", onglet1),   //Définition de l'onglet1 : titre, valeur
			         new GInfoWindowTab("Détails", onglet2)    //Définition de l'onglet2 : titre, valeur
			         ]; 
                  GEvent.addListener(marker, "click", function() { 
			        marker.openInfoWindowTabsHtml(infoTabs);        // Affichage d'une bulle contenant l'adresse et le detail
			      });  
                }
              });
             }
           } 
 
	       GDownloadUrl("test000.xml", function(data)   // Fichier xml contenant les valeurs de la BDD
	       { 
		       var xml = GXml.parse(data); 
		       var markers = xml.documentElement.getElementsByTagName("marker"); 
		       for (var i = 0; i < markers.length; i++)
		       {		   
                 var add = new Array();       // Tableau adresse
	             var detail = new Array();    // Tableau detail
		         add = markers[i].getAttribute("adresse");        // Valeur de l'attribut adresse du fichier xml
		         detail = markers[i].getAttribute("detail");  // Valeur de l'attribut detail du fichier xml
		         showAddress(add,add,detail); //Création du marker en fonction de l'adresse
    		   } 
	       }); 
 
       }  //Fin if
     }  //Fin load
 
     //]]>
     </script>

PARTIE HTML:

Code :

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

1
2
3
4
 
<body onload="load()" onunload="GUnload()"> 
      <div id="map" style="width: 800px; height: 600px"></div> 
</body>

FICHIER XML:

Code :

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

1
2
3
4
5
6
 
<?xml version="1.0" encoding="utf-8"?>
<markers>
  <marker adresse="35 avenue de la république 75011 paris" detail="test1" />
  <marker adresse="16 rue oberkampf 75011 paris" detail="test2" />
</markers>

J'ai commenté ce que je pouvais.

En espérant que ça vous aidera...