Multiple markers with labels in Google Maps

I'd like to implement multiple markers with labels (documented here: http://google-maps-utility-library-v3.googlecode.com/svn/tags/markerwithlabel/1.0.1/docs/examples.html) a开发者_Go百科nd I'm having some problems with writing the code.

For 2 markers for example you'd have to use the following code:

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}
     });

This is OK, but what about 10 markers? I'd like to be able to do something like this:

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

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

The problem is that when I write a "for" function, the map doesn't display any markers.

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

I'm not very good at programming, so, can you please tell me what I'm doing wrong?

After this, of course there's the issue of adding info windows, but let's talk about that later.

Thank you for your time.

In your for-loop you forgot to include

map: map,

underneath "draggable:true"

The reason this matters is that you need to tell MarkerWithLabel what map to add the markers too. You might have multiple maps on the page.

Thanks for the reply. Yes, I forgot to include the map parameter in the thread above - I had it in the code.

The problem actually had to do with associating icons to markers:

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

followed by 02, 03 etc. I didn't write the array accordingly, thus the code never actually made it to the marker section (which was OK).

The content of the for function looks like this:

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}});

Take a look at this article and reference website for more details :

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);

  }

Reference :

Multiple marker with labels in google map with Asp.net

Before the loop , you need to declare the marker as an array first .

var marker = new Array(); 

Then only assign it as MarkerwithLabel class inside the loop

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

}