Marqueurs multiples avec des étiquettes dans Google Maps

Question

Je voudrais implémenter plusieurs marqueurs avec des étiquettes (documenté ici: http://google-maps-utility-library-v3.googlecode.com/svn/tags/markerwithlabel/1.0.1/docs/examples.html) et j'ai quelques problèmes avec l'écriture du code.

Pour 2 marqueurs par exemple, vous auriez à utiliser le code suivant:

var latlng1 = new google.maps.LatLng(49, -123); 
var latlng2 = new google.maps.LatLng(48, -123); 

var marker1 = new MarkerWithLabel({ 
     position: latlng1, 
     draggable: true, 
     map: map, 
     labelContent: "abcd", 
     labelAnchor: new google.maps.Point(22, 0), 
     labelClass: "labels", 
     labelStyle: {opacity: 0.75} 
    }); 

var marker2 = new MarkerWithLabel({ 
     position: latlng2, 
     draggable: true, 
     map: map, 
     labelContent: "efgh", 
     labelAnchor: new google.maps.Point(22, 0), 
     labelClass: "labels", 
     labelStyle: {opacity: 0.75} 
    }); 

Ceci est OK, mais qu'en 10 marqueurs? Je voudrais pouvoir faire quelque chose comme ceci:

var locations = [ 
    new google.maps.LatLng(49, -123), 
    new google.maps.LatLng(48, -123), 
    ]; 

var labels = [ 
    "abcd", 
    "efgh", 
    ]; 

Le problème est que quand j'écris une fonction « pour », la carte ne présente pas de marqueurs. Je ne suis pas très bon en programmation, alors, pouvez-vous s'il vous plaît dites-moi ce que je fais mal? Après cela, bien sûr, il y a le problème de l'ajout de fenêtres d'information, mais parlons-en plus tard.

Nous vous remercions de votre temps.

Answer 1

Dans votre boucle for vous avez oublié d'inclure

map: map, 

sous « draggable: true »

La raison pour laquelle cette question est importante est que vous devez dire ce que MarkerWithLabel carte pour ajouter les marqueurs aussi. Vous pourriez avoir plusieurs cartes sur la page.

Answer 2

Merci pour la réponse. Oui, j'ai oublié d'inclure le paramètre de la carte dans le fil ci-dessus - je l'ai eu dans le code.

Le problème avait en fait à voir avec l'association des icônes à des marqueurs:

new google.maps.MarkerImage('http://google-maps-icons.googlecode.com/files/black01.png') 

suivi de 02, 03 etc. Je ne l'ai pas écrire le tableau en conséquence, donc le code n'a jamais vraiment fait à la section de marqueur (ce qui était OK).

Le contenu de la fonction pour ressemble à ceci:

var marker = new MarkerWithLabel({ 
     position: locations[i], 
     draggable: true, 
     map: map, 
     icon: icons[i], 
     labelContent: labels[i], 
     labelAnchor: new google.maps.Point(22,0), 
     labelClass: "labels", 
     labelStyle: {opacity: 0.85}}); 

Answer 3

Avant la boucle, vous devez déclarer le marqueur comme un tableau premier.

var marker = new Array(); 

Affectez ensuite seulement comme classe MarkerwithLabel dans la boucle

for (var i = 0; i < locations.length; i++) 
{ 
    marker = new MarkerWithLabel({ pro}) 

} 

Answer 4

Jetez un oeil à cet article et le site de référence pour plus de détails:

Multiple marker with labels in google map

<script type="text/javascript"> 
//Generate Markers Value Array 
var markers = [ 
<asp:Repeater ID="rptMarkers" runat="server"> 
<ItemTemplate> 
      { 
      "title":'<%# Eval("Area") %>', 
      "lat": '<%# Eval("Latitute") %>', 
      "lng": '<%# Eval("Longitute") %>', 
      "description": '<%# Eval("Address") %>' 
     } 
</ItemTemplate> 
<SeparatorTemplate> 
    , 
</SeparatorTemplate> 
</asp:Repeater> 
]; 

</script> 

//

for (i = 1; i <= markers.length; i++) { 
    var data = markers[i-1] 
    var myLatlng = new google.maps.LatLng(data.lat, data.lng); 

    var marker = new MarkerWithLabel({ 
     position: myLatlng, 
     map: map, 
     title: data.title, 
     labelContent: i, 
     labelAnchor: new google.maps.Point(7, 30), 
     labelClass: "labels", // the CSS class for the label 
     labelInBackground: false 
    }); 

    (function (marker, data) { 
     google.maps.event.addListener(marker, "click", function (e) { 
      infoWindow.setContent(data.description); 
      infoWindow.open(map, marker); 
     }); 
    })(marker, data); 

    } 

Référence:

Multiple marker with labels in google map with Asp.net