Assign infowindow for each marker in google maps

Question

I have a problem as regarding the assigning of infowindow to each marker in my map.

JS code:

for (i=0;i<location.length;i++){
    var id = location[i][0];
    var name = location [i][1];
    var pos = new google.maps.LatLng(location[i[3],location[i][4]);


    var contentString = id;
    var infowindow = new google.maps.InfoWindow({content:contentString});
    var marker= new google.maps.Marker({position: pos, map: map, title: id});

    marker.addListener('click', function() { infowindow.open(map, this);

});

The problem is that my click handler will display the same "id" for each marker (id displayed is the id of my LAST record in my database). Is there a way to display each infowindow for each marker?

Possible duplicate of [Google Maps JS API v3 - Simple Multiple Marker Example](http://stackoverflow.com/questions/3059044/google-maps-js-api-v3-simple-multiple-marker-example) — geocodezip, Sep 26 '15 at 20:25

EugenSunic · Answer 1 · 2018-06-04T06:48:27.090

Assuming that your location array is fetched and populated from the database...

First of all you have an error:

var pos = new google.maps.LatLng(location[i[3],location[i][4]);

you should fix your brackets and put it this way:

var pos = new google.maps.LatLng(location[ i ][3],location[ i ][4]);

Here is an example:

I tried to follow your example as much as I could since you did not specify an array and made one which corresponds to your array (you can add one more column if your want for your names)

Loop:

  for (var i = 0; i < location.length; i++) {

    var marker = new google.maps.Marker({
        position: new google.maps.LatLng(location[i][1], location[i][2]),
        map: map,
        title: location[i][0]
    });

    google.maps.event.addListener(marker, 'click', (function(marker, i) {
        return function() {
            infowindow.setContent(location[i][0]);
            infowindow.open(map, marker);
        }
    })(marker, i));
}

Declare your infoWindow before the loop and extract it inside your event

Infowindow:

 var infowindow = new google.maps.InfoWindow();

Click event:

    google.maps.event.addListener(marker, 'click', (function(marker, i) {
     return function() {
         infowindow.setContent(location[i][0]);
         infowindow.open(map, marker);
     }
 })(marker, i));

Full fiddle example: http://jsfiddle.net/eugensunic/7TZFP/5/

Thank you. Adding `(function(marker, i)` along with `return function() {...}` made mine work. Without that it doesn't work. I don't really get why. — Valachio, Dec 20 '17 at 20:52
if you want dynamic content besides the location, you can pass the content into the `addListener` function (instead of `i` in the function and closure parameters). — Aaron Bramson, Aug 14 '18 at 09:13

score 0 · Answer 2 · answered Mar 28 '19 at 08:02

var markers = [];
var infowindow = new google.maps.InfoWindow();
var map

var pointerObj = [{
        acLatitude: "34.005723",
        acLongitude: "-84.23386",
        name: "xyz",
        address: "abc",
        icon:"/img/as.jpg"
    },
    {
        acLatitude: "34.005723",
        acLongitude: "-84.23386",
        name: "xyz",
        address: "abc",
        icon:"/img/as.jpg"
    },
    {
        acLatitude: "34.005723",
        acLongitude: "-84.23386",
        name: "xyz",
        address: "abc",
        icon:"/img/as.jpg"
    },
    {
        acLatitude: "34.005723",
        acLongitude: "-84.23386",
        name: "xyz",
        address: "abc",
        icon:"/img/as.jpg"
    }
];

function initMapObj() {
    map = new google.maps.Map(document.getElementById("googleMap"), {
        zoom: 16,
        center: new google.maps.LatLng(34.005813, -84.32682),
        mapTypeId: "roadmap",
        mapTypeControl: true,
        mapTypeControlOptions: {
            style: google.maps.MapTypeControlStyle.HORIZONTAL_BAR,
            position: google.maps.ControlPosition.TOP_RIGHT
        },
        zoomControl: true,
        zoomControlOptions: {
            position: google.maps.ControlPosition.RIGHT_BOTTOM
        },
        scaleControl: true,
        streetViewControl: true,
        streetViewControlOptions: {
            position: google.maps.ControlPosition.RIGHT_BOTTOM
        },
        fullscreenControl: true
    });
}
function bindMarkers() {
    var bounds = new google.maps.LatLngBounds();
    for (var key in pointerObj) {
        var arrObj = pointerObj[key];
        latLongCollection.push({
            position: new google.maps.LatLng(arrObj.acLatitude, arrObj.acLongitude),
            name: arrObj.name,
            address: arrObj.address,
        });
    }

    latLongCollection.forEach(function (pointerDtl) {
        var marker = new google.maps.Marker({
            position: pointerDtl.position,
            icon: pointerDtl.icon,
            map: map
        });
        markers.push(marker);
        bounds.extend(marker.position); //center the map respective of all the points
        google.maps.event.addListener(marker, "mouseover", (function (mm, tt) { //can be changed with 'click' event
            return function () {                
                var infoContent = '<div class="infowindow">';
                infoContent += '<div class="point-name">'+pointerDtl.catName+'</div>';
                infoContent += '<div class="point-address">' + pointerDtl.address + '</div>';
                infoContent += "</div>";

                infowindow.setOptions({
                    content: infoContent
                });

                infowindow.open(map, mm);
            };
        })(marker, pointerDtl.address));
    });
    map.fitBounds(bounds) //center the map respective of all the points
}

Assign infowindow for each marker in google maps

2 Answers2