Google Map info window is only showing on one marker in JavaScript

Question

I am developing a Website that offers location based service. So I am integrating my website with Google Map API using JavaScript. Then I import the data to Map and show each item as marker on Map. Importing and showing data as markers on map is working fine.

But I am having a problem with showing info window for each marker on map. The problem is I got two markers on my map, but when I click on whatever item, info window is always showing on the same item. Please see the screenshot below.

As you can see in the screenshot, I clicked on the marker on the right, but info window is showing on the different item.

This is my full JavaScript for map:

    var map;

    function initialize() {
        var lat = $('.region-latitude').val();
        var long = $('.region-longitude').val();
        map = new google.maps.Map(document.getElementById('map'), {
            zoom: 4,
            center: new google.maps.LatLng(lat, long),
            mapTypeId: google.maps.MapTypeId.TERRAIN
        });

        var script = document.createElement('script');
        script.src = $('.map-items-url').val();
        document.getElementsByTagName('head')[0].appendChild(script);
    }

    window.items_callback = function (results) {

        for (var i = 0; i < results.features.length; i++) {
            var coords = results.features[i].geometry.coordinates;

            var latLng = new google.maps.LatLng(coords[0], coords[1]);
            var itemMarker = new google.maps.Marker({
                position: latLng,
                map: map,
                title: results.features[i].name
            });

            var contentString = '<h3>' + results.features[i].name + '</h3>';

            var infowindow = new google.maps.InfoWindow({
                content: contentString
            });

            itemMarker.addListener('click', function () {
                infowindow.open(map, itemMarker);
            });

        }
    }

    google.maps.event.addDomListener(window, 'load', initialize)

What is wrong with my code? How can I show different info window for each marker?

Answer 1

This looks like a scope problem. At the moment when click handler is activated, the itemMarker points to the last added marker as well as infowindow points to last info window created. That's why it always shows only over last added marker. You have to create a scope which encapsulates these variables.

Try this:

for (var i = 0; i < results.features.length; i++) {
   (function(index){
        var coords = results.features[index].geometry.coordinates;

        var latLng = new google.maps.LatLng(coords[0], coords[1]);
        var itemMarker = new google.maps.Marker({
            position: latLng,
            map: map,
            title: results.features[index].name
        });

        var contentString = '<h3>' + results.features[index].name + '</h3>';

        var infowindow = new google.maps.InfoWindow({
            content: contentString
        });

        itemMarker.addListener('click', function () {
            infowindow.open(map, itemMarker);
        });

    })(i);
}

For more information check this SO question and answer and also this SO question and answers. Also this is a good post on the scopes matter.