infowindow is not updating with marker google maps

Question

I am developing a web page for viewing vehicle locations using gps data. I have make the back end working fine with the help of Mr. Aruna a genius in stack Overflow. Now I need a help for updating my google map infowindow. marker is updating its location no issue with that. while clicking it is not updating is current speed and another info according to that. Below is the code in

var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);

getMarkers();

function getMarkers() {                             

    var infowindow = null;    

    $.get('/markers', {}, function (res, resp) {
        console.dir(res);

        for (var i = 0, len = res.length; i < len; i++) {                       


            var content = res[i].name + " S1: " + res[i].speed * 1.6 + '<br />' + "D: " + res[i].lastupdate

            infowindow = new google.maps.InfoWindow({
                content: "A"
            });

            //Do we have this marker already?
            if (markerStore.hasOwnProperty(res[i].id)) {

                console.log('just  move it...');                    
                markerStore[res[i].id].setPosition(new google.maps.LatLng(res[i].position.lat, res[i].position.long));
                //markerStore[res[i].id].setMap(map);


                // Not sure below block and its not updating
                google.maps.event.addListener(markerStore[res[i].id], 'click', (function (marker, content, infowindow) {
                    return function () {
                        infowindow.setContent(content);
                        infowindow.open(map, markerStore[res[i].id]);
                    };
                })(markerStore[res[i].id], content, infowindow));


            } else {                                  


                var marker = new google.maps.Marker({
                    position: new google.maps.LatLng(res[i].position.lat, res[i].position.long),
                    title: res[i].name,
                    map: map
                });

                google.maps.event.addListener(marker, 'click', (function (marker, content, infowindow) {
                    return function () {
                        infowindow.setContent(content);
                        infowindow.open(map, marker);
                    };
                })(marker, content, infowindow));


                //var marker = new google.maps.Marker({
                //    position: new google.maps.LatLng(res[i].position.lat, res[i].position.long),
                //    title: res[i].name,
                //    map: map
                //});


                //google.maps.event.addListener(marker, 'click', (function (marker, content, infowindow) {
                //    return function () {
                //        infowindow.setContent(content);
                //        infowindow.open(map, marker);
                //    };
                //})(marker, content, infowindow));                  


                markerStore[res[i].id] = marker;
                console.log(marker.getTitle());
            }
        }
        window.setTimeout(getMarkers, INTERVAL);
    }, "json");
}

Please help me ...

Answer 1

Your click event listener is called asynchronously, long after your for loop has completed. So the value of i is not what you expect.

This is easy to fix (assuming there are not other problems as well).

Take all of the code inside the for loop body and make it a function. I'll call the function addMarker( item ) , but of course you can use any name you want.

Everywhere you have res[i] in that function, change it to item . Then shorten the for loop so it contains only a single line: addMarker( res[i] ); .

So now your code looks like this:

var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);

getMarkers();

function getMarkers() {                             

    var infowindow = null;    

    $.get('/markers', {}, function (res, resp) {
        console.dir(res);

        for (var i = 0, len = res.length; i < len; i++) {
            addMarker( res[i] );
        }

        function addMarker( item ) {
            var content = item.name + " S1: " + item.speed * 1.6 + '<br />' + "D: " + item.lastupdate

            infowindow = new google.maps.InfoWindow({
                content: "A"
            });

            //Do we have this marker already?
            if (markerStore.hasOwnProperty(item.id)) {

                console.log('just  move it...');                    
                markerStore[item.id].setPosition(new google.maps.LatLng(item.position.lat, item.position.long));
                //markerStore[item.id].setMap(map);


                // Not sure below block and its not updating
                google.maps.event.addListener(markerStore[item.id], 'click', (function (marker, content, infowindow) {
                    return function () {
                        infowindow.setContent(content);
                        infowindow.open(map, markerStore[item.id]);
                    };
                })(markerStore[item.id], content, infowindow));


            } else {                                  


                var marker = new google.maps.Marker({
                    position: new google.maps.LatLng(item.position.lat, item.position.long),
                    title: item.name,
                    map: map
                });

                google.maps.event.addListener(marker, 'click', (function (marker, content, infowindow) {
                    return function () {
                        infowindow.setContent(content);
                        infowindow.open(map, marker);
                    };
                })(marker, content, infowindow));


                //var marker = new google.maps.Marker({
                //    position: new google.maps.LatLng(item.position.lat, item.position.long),
                //    title: item.name,
                //    map: map
                //});


                //google.maps.event.addListener(marker, 'click', (function (marker, content, infowindow) {
                //    return function () {
                //        infowindow.setContent(content);
                //        infowindow.open(map, marker);
                //    };
                //})(marker, content, infowindow));                  


                markerStore[item.id] = marker;
                console.log(marker.getTitle());
            }
        }
        window.setTimeout(getMarkers, INTERVAL);
    }, "json");
}

I didn't check for any other errors in your code, but this will fix the specific problem you are asking about.

To learn more about this, read up on JavaScript closures .