API v3: problème pour ajouter un marker

**abel.ludba** · 17/03/2011, 21h49

Bonjour
Je suis en train de creer ma premiere carte avec Google Maps. voila mon code en un seul fichier

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
<html>
<head>
<title>Read XML Data 2011 </title>
 <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false">
 </script>
 
  <script type="text/javascript"> 
// .......................................................
 var icon_National = 'National.png';
 function initialize() {    
 
           var myOptions = 
		   {
           zoom: 11,
           center: new google.maps.LatLng(45.509944,-73.820907),
           mapTypeId: google.maps.MapTypeId.ROADMAP           }
           var map = new google.maps.Map(document.getElementById("map_canvas"),
                                  myOptions);
     };
 
 // ............................................
    var xmlText  = "<?xml version=\"1.0\" encoding=\"UTF-8\"?>\n";
        xmlText += "<shape>\n";
        xmlText += "  <point rcnumber=\"56413\" lat=\"45.5041\"  lng=\"-73.82003\" />\n";
        xmlText += "  <point rcnumber=\"76562\" lat=\"45.50541\" lng=\"-73.82021\" >\n"; 
        xmlText += "  </point>\n";
        xmlText += "</shape>\n";
 
    if (window.ActiveXObject) { // Internet Explorer
      x = new ActiveXObject("Microsoft.XMLDOM");
      x.async = false;
      x.loadXML(xmlText);
    }
    else if (window.DOMParser) { // Autres
        var p = new DOMParser();
        x = p.parseFromString(xmlText, "text/xml");
    }
    else {
 
    }
 
 
    if (x) {
      var myLine = x.getElementsByTagName("point");
 
	   var cc= new Array;
	   var x= new Array;
	   var y=new Array;
	   var txt=new Array;
	   var latLon;
 
 
      for (i=0; i<myLine.length; i++) {
	    cc[i]= myLine[i].getAttribute("rcnumber");
		x[i]=  myLine[i].getAttribute("lng");
		y[i]=  myLine[i].getAttribute("lat");
		latLong =new google.maps.LatLng(x[i],y[i]); 	  
		alert ("latLong: "+latLong);
 
     }
 
	var MonMarker =  createMyMarker(icon_National,latLong);
    }
 
 
 // .......................................................
//
 function createMyMarker(image,LatitudeLongitude){
		alert("Je suis dans la fonction Creer Marker");	
	    var marker = new google.maps.Marker({
                      position: LatitudeLongitude, 
                      map: map,
                      icon: image 
    });
      return marker;
   }
 
</script>
 
</head>
<body onload="initialize()" >
    <div id="map_canvas" style="width: 65%; height: 80%"></div>
  </body>
</html>

Je lis mes données à partir d'un fichier XML. Je voudrais ajouter des markeurs personnalisés (les icon_National dans mon fichier).
Seulement, cels ne fonctionne pas.
Quelqu'un pourrait avoir une idée sur le pourquoi?
Merci.
Bonne soirée
Abel

**kohsaka** · 21/03/2011, 11h38

Ton point est peut être bien créé, mais il ne me semble pas que tu l'affiches sur la map.

une fois créé, il faut que tu l'ajoutes à ta map avec :

Code :

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

1
2
3
 
        // afficher le marker sur la map
        monMarker.setMap(map);

**NoSmoking** · 22/03/2011, 22h24

Bonjour,
bien des choses à dire sur ton code et je ne sais trop par quoi commencer.
- bien indenter un code permet d'y voir plus clair.

Code :

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

1
2
3
4
5
6
7
8
function initialize(){    
  var myOptions =  { 
    zoom: 11,
    center: new google.maps.LatLng(45.509944,-73.820907),
    mapTypeId: google.maps.MapTypeId.ROADMAP
  }
  var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
};

la déclaration et l'affectation de ta variable map en fait une variable locale, non visible par les autres fonctions donc non utilisable, le problème est qu'il faut attacher tes marqueurs à cette map, donc à mettre en global puisqu'utilisée dans la fonction createMyMarker

- bien nommer ces variables évites de s'emmêler les pinceaux dans lors de leur utilisation
la méthode LatLng attend en paramètre la latitude PUIS la longitude et pas l'inverse

Code :

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

1
2
3
4
 
x[i] = myLine[i].getAttribute("lng");
y[i] = myLine[i].getAttribute("lat");
latLong = new google.maps.LatLng(x[i], y[i]);

il serait préférable d'écrire

Code :

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

1
2
3
lon[i] = myLine[i].getAttribute("lng");      
lat[i] = myLine[i].getAttribute("lat");      
latLong = new google.maps.LatLng( lat[i], lon[i]);

moins de chance de ce tromper

concernant la boucle de création de tes marqueurs le HIC est que tu ne crées qu'un marqueur en dehors de la boucle

Code :

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

1
2
3
4
5
6
7
8
for( i = 0; i < myLine.length; i++) {
  cc[i] = myLine[i].getAttribute("rcnumber");
  x[i] = myLine[i].getAttribute("lng");
  y[i] = myLine[i].getAttribute("lat");
  latLong = new google.maps.LatLng(x[i], y[i]);
  alert("latLong: " + latLong);
}
var MonMarker = createMyMarker(icon_National, latLong);

je pense que ce que tu voulais faire c'est créer autant de marqueurs que tu as d'enregistrements, donc il est préférable d'écrire

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
  var lat = [];
  var lon = [];
  var latLong;
  var MonMarker;
  var i, nb = myLine.length;
  for( i = 0; i < nb; i++) {
    cc[i] = myLine[i].getAttribute("rcnumber"); // ne sert pas!!!    
    lon[i] = myLine[i].getAttribute("lng");      
    lat[i] = myLine[i].getAttribute("lat");
    latLong = new google.maps.LatLng( lat[i], lon[i]);      
    MonMarker = createMyMarker( icon_National, latLong);
  }

- rien ne sert de créer une fonction qui ne sera appelée que par une fonction
autant la mettre directement à l'intérieure de celle ci, dans ton cas il s'agit de la fonction createMyMarker que tu peux mettre directement dans la boucle en simplifiant légèrement l'écriture

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
  var lat = [];
  var lon = [];
  var marker;
  var i, nb = myLine.length;
  for( i = 0; i < nb; i++) {
    lon[i] = myLine[i].getAttribute("lng");
    lat[i] = myLine[i].getAttribute("lat");
    marker = new google.maps.Marker({
      position : new google.maps.LatLng( lat[i], lon[i]),
      map : map,
      icon : 'National.png'
    });
  }

- bien structurer l'enchainement des fonctions
comme la partie du code ci dessus s'exécute avant la création de la map, function initialize sur le onload du body, cela va planter irrémédiablement.
Dans ce cas autant tout mettre dans la fonction initialize, au final tu pourrais avoir ceci

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
function initialize() {
  var myOptions = {
    zoom: 11,
    center: new google.maps.LatLng(45.509944, -73.820907),
    mapTypeId: google.maps.MapTypeId.ROADMAP
  };
 
  var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
  // ............................................
  var xmlText = "<?xml version=\"1.0\" encoding=\"UTF-8\"?>\n";
  xmlText += "<shape>\n";
  xmlText += "  <point rcnumber=\"56413\" lat=\"45.5041\"  lng=\"-73.82003\" />\n";
  xmlText += "  <point rcnumber=\"76562\" lat=\"45.50541\" lng=\"-73.82021\" >\n";
  xmlText += "  </point>\n";
  xmlText += "</shape>\n";
 
  if (window.ActiveXObject) { // Internet Explorer
    x = new ActiveXObject("Microsoft.XMLDOM");
    x.async = false;
    x.loadXML(xmlText);
  } else if (window.DOMParser) { // Autres
    var p = new DOMParser();
    x = p.parseFromString(xmlText, "text/xml");
  }
 
  if (x) {
    var myLine = x.getElementsByTagName("point");
    var lat = [];
    var lon = [];
    var marker;
    var i, nb = myLine.length;
    for( i = 0; i < nb; i++) {
      lon[i] = myLine[i].getAttribute("lng");
      lat[i] = myLine[i].getAttribute("lat");
      marker = new google.maps.Marker({
        position : new google.maps.LatLng( lat[i], lon[i]),
        map : map,
        icon : 'National.png'
      });
    }
  }
}

Il doit bien rester une ou deux remarques mais le plus gros est fait.

Je ne parlerais pas du pseudo XML, qui ne m'apparait pas nécessaire, mais je ne connais pas ta motivation, la création d'un objet me semble à priori plus adéquat voir un exemple de déclaration.

**abel.ludba** · 25/03/2011, 14h05

Bonjour kohsaka et NoSmoking et tous les autres.

Merci beaucoup pour vos réponses.

NoSmoking j'apprécie les commentaires très utiles.
J'enchaine avec une question qui pourrait interesser d'autres . Donc, je la pose dans un thread à part.
Merci encore.
Abel

API v3: problème pour ajouter un marker [Google Maps]

APIs Google

Discussions similaires

Partager

Partager