Issue trying to set google maps info window content with

Question

So i have several markers appearing from an array, but i'm having a lot of difficulty setting the content of the InfoWindows that appear

I put the titles in which works great, but when I try to set the content, it doesn't set the content, but still shows the title.

What am I doing wrong?

for (index = 0; index < data.length; ++index) {
    locationName = data[index].LocationName;
    locationID = data[index].LocationID;
    locationX = data[index].XCord;
    locationY = data[index].YCord;
    var infoContent = '<div><h3>' + data[index].LocationName + '</h3></div><div>' + data[index].LocationID +  '</div>';
    var mapLocation = new google.maps.LatLng(locationX,locationY);
    var marker = new google.maps.Marker({ // Set the marker
        position: mapLocation, // Position marker to coordinates
        icon: image, //use our image as the marker
        map: map, // assign the marker to our map variable
        title: data[index].LocationName,
        content: infoContent
        //draggable:true //Have a guess what this does
    });

    // Allow each marker to have an info window    
    google.maps.event.addListener(marker, 'click', (function (marker, index) {
        return function () {
            infoWindow.setContent(infoContent);
            infoWindow.setContent(this.title);
            infoWindow.open(map, this);
        }
    })(marker, index));

    var infoWindow = new google.maps.InfoWindow({ 
        content: infoContent 
    }), marker, index;
}

put that in a fiddle please – EugenSunic Aug 02 '15 at 20:14 — EugenSunic, Aug 02 '15 at 20:14

score 1 · Accepted Answer · edited May 23 '17 at 12:29

1

You are calling setContent twice:

infoWindow.setContent(infoContent);
infoWindow.setContent(this.title);

I guess the last one should be removed.

Edit:

To get the correct infoWindow content, try moving the creation of the eventListener to a function:

// Allow each marker to have an info window    
updateInfoWindowOnMarkerClick(marker, infoContent); 

//Somewhere after the loop
function updateInfoWindowOnMarkerClick(marker, infoContent){
    google.maps.event.addListener(marker, "click", function () {
        infoWindow.setContent(infoContent);
        infoWindow.open(map, this);
    });      
}

Have a look at JavaScript closure inside loops – simple practical example for more information about function scope.

edited May 23 '17 at 12:29

Community

1
1

answered Aug 02 '15 at 20:15

gusjap

2,397
5
24
38

i've removed that and it displays the last set of values in the array, rather than the one clicked – kingtreelo Aug 02 '15 at 20:26
@user3419903 see updated answer for solution on how to fix this – gusjap Aug 02 '15 at 20:56

Issue trying to set google maps info window content with

1 Answers1