javascript - Dynamic content in google maps api v3 info windows on multiple custom markers - Stack Overflow

admin管理员组

文章数量:1315510

I have the below js that implements a google map with a looped through set of custom markers. I need each marker to have a different infowindow so when you click the marker you get the content that is relevant. At the minute it doesn't open the infowindow and doesn't give me an error in console

infowindow = new google.maps.InfoWindow();

    for(var i=0; i<google_map_item.length; i++)
    {
        latlon = new google.maps.LatLng(google_map_item[i].lat, google_map_item[i].lon)
        bounds.extend(latlon);
        var iconcolor = google_map_item[i].iconColor;
        marker = new google.maps.Marker({
            map: map,
            position: latlon,
            icon: ";chld=" + (i + 1) + "|"+iconcolor+"|000000",
            type: 'flat',
            icon_color: '#ff0000', 
            label_color: '#ffffff', 
            width: '20', 
            height: '20', 
            label_size: '11',
                            clickable: true
        });

                    google.maps.event.addListener(marker, 'click', function() {
                        //marker.info.open(map, this);
                        infowindow.setContent(this.latlon);
                        infowindow.open(map, this);
                    });


        map.fitBounds(bounds);
    }

I have the below js that implements a google map with a looped through set of custom markers. I need each marker to have a different infowindow so when you click the marker you get the content that is relevant. At the minute it doesn't open the infowindow and doesn't give me an error in console

infowindow = new google.maps.InfoWindow();

    for(var i=0; i<google_map_item.length; i++)
    {
        latlon = new google.maps.LatLng(google_map_item[i].lat, google_map_item[i].lon)
        bounds.extend(latlon);
        var iconcolor = google_map_item[i].iconColor;
        marker = new google.maps.Marker({
            map: map,
            position: latlon,
            icon: "https://chart.googleapis./chart?chst=d_map_pin_letter_withshadow&chld=" + (i + 1) + "|"+iconcolor+"|000000",
            type: 'flat',
            icon_color: '#ff0000', 
            label_color: '#ffffff', 
            width: '20', 
            height: '20', 
            label_size: '11',
                            clickable: true
        });

                    google.maps.event.addListener(marker, 'click', function() {
                        //marker.info.open(map, this);
                        infowindow.setContent(this.latlon);
                        infowindow.open(map, this);
                    });


        map.fitBounds(bounds);
    }

• javascript
• google-maps
• google-maps-api-3

Share Improve this question Follow asked Jul 17, 2012 at 8:06 Steve SmithSteve Smith 75266 gold badges1414 silver badges2929 bronze badges 1

• possible duplicate of Google Maps - Multiple markers - 1 InfoWindow problem – duncan Commented Jul 17, 2012 at 12:57

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 5

var marker3 = new google.maps.Marker({
          map: map,                                                        
          icon: 'miniMarker.png',
          info: destArr[i][9],
          position: new google.maps.LatLng(destArr[i][7], destArr[i][8])
});
var infowindow3 = new google.maps.InfoWindow();
google.maps.event.addListener(marker3, 'mouseover', function () {
        infowindow3.setContent(this.info);                              
        infowindow3.open(map, this);                        
});

Working example with more then 20 markers and info window

The reference in the marker array was incorrect as outlined in this similar question

Google Maps - Multiple markers - 1 InfoWindow problem

本文标签： javascriptDynamic content in google maps api v3 info windows on multiple custom markersStack Overflow