Question

I have an array that is being looped through in js to put custom markers on a google map. I need to add a hidden info window for each marker so that when it is clicked the relevant infowindow is displayed. Currently I am doing the following:

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.com/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
        });

        marker.info = new google.maps.InfoWindow({
                        content: '<b>Speed:</b> knots'
                    });

                    google.maps.event.addListener(marker, 'click', function() {
                        marker.info.open(map, marker);
                    });

        map.fitBounds(bounds);
    }

However this only creates 1 info box that displays no matter which point you click.

Thanks for any help

Answer 1

Check out this blog post:

http://you.arenot.me/2010/06/29/google-maps-api-v3-0-multiple-markers-multiple-infowindows/

Basically, you are overwriting each marker object with the new marker object. You need to make each marker context-specific, using this.

Your event listener should look like:

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

You may need to make more changes to ensure you are creating new objects for each iteration. Try this and let us know!