Dynamic content in google maps api v3 info windows on multiple custom markers

11,338
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

Share:
11,338
Steve Smith
Author by

Steve Smith

Updated on June 05, 2022

Comments

  • Steve Smith
    Steve Smith almost 2 years

    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.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
            });
    
                        google.maps.event.addListener(marker, 'click', function() {
                            //marker.info.open(map, this);
                            infowindow.setContent(this.latlon);
                            infowindow.open(map, this);
                        });
    
    
            map.fitBounds(bounds);
        }