Update multiple infowindow with interval

Question

I wants to update all my infowindows after ajax request even if its opened, I am using map api v3. I am able to update my marker and position but not infoWindow, I have also followed this approach as well. you can check my code below. Current snippet is also setting same content for each window, you can check it when the infowindow is opened, then click "Update" button.

var locations = [
    [
        "New Mermaid",
        36.9079,
        -76.199,
        1,
        "Georgia Mason",
        "",
        "Norfolk Botanical Gardens, 6700 Azalea Garden Rd.",
        "coming soon"
    ],
    [
        "1950 Fish Dish",
        36.87224,
        -76.29518,
        2,
        "Terry Cox-Joseph",
        "Rowena's",
        "758 W. 22nd Street in front of Rowena's",
        "found"
    ],
    [
        "A Rising Community",
        36.95298,
        -76.25158,
        3,
        "Steven F. Morris",
        "Judy Boone Realty",
        "Norfolk City Library - Pretlow Branch, 9640 Granby St.",
        "coming soon"
    ],
    [
        "A School Of Fish",
        36.88909,
        -76.26055,
        4,
        "Steven F. Morris",
        "Sandfiddler Pawn Shop",
        "5429 Tidewater Dr.",
        "found"
    ]
    ]
    var markers = [];
    var map = new google.maps.Map(document.getElementById('map'), {
        zoom: 12,
        // center: new google.maps.LatLng(-33.92, 151.25),
        center: new google.maps.LatLng(36.8857, -76.2599),
        mapTypeId: google.maps.MapTypeId.ROADMAP
    });

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

    var marker, i;

    for (i = 0; i < locations.length; i++) {
        marker = new google.maps.Marker({
            position: new google.maps.LatLng(locations[i][1], locations[i][2]),
            icon: {
                url: 'http://map.vegan.london/wp-content/uploads/map-marker-blue.png',
                size: new google.maps.Size(60, 60)
            },
            map: map
        });

        google.maps.event.addListener(marker, 'click', (function (marker, i) {
            return function () {
                infowindow.setContent(locations[i][0], locations[i][6]);
                infowindow.open(map, marker);
            }
        })(marker, i));
        markers.push(marker);
    }
    $(document).ready(function () {

        function updateMarkers(m) {
            $.each(m, function (i, mkr) {
                pos = new google.maps.LatLng(mkr.position.lat() + .010, mkr.position.lng());
                mkr.setIcon('http://kallyaswp.hogashstudio.netdna-cdn.com/demo/wp-content/uploads/2015/08/map-marker.png');
                mkr.setPosition(pos);
                infowindow.setContent('<div>Update:'+locations[i][7]+'</div>');/**/
            });
        };
        $('#update').click(function () {
            updateMarkers(markers);
        })
    });

#update{
  font-family:arial;
  background:#fff;
  padding:10px;
  border-radius:5px;
  display:inline-block;
  margin:10px;
  cursor:pointer;
  box-shadow:0 0 3px rgba(0,0,0,.5);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div><a id="update">UPDATE</a>
</div>
  <div id="map" style="width: 500px; height: 400px;"></div>
<script src="http://maps.google.com/maps/api/js?sensor=false"></script>
</div>

Answer 1

You have an array of 4 markers, but only a single infowindow. So when you call updateMarkers you loop 4 times, setting that one infowindow's contents. Eventually the infowindow only has the contents of the last item in the array.

However the setContent in the markers' click event listener overrides any content you might have set on the infowindow. You'd also need to remove that event listener when you call updateMarkers.

I'd say move the marker's click event listener into its own function, that you can call both when you initially create the marker, and when you update the markers.

Something a bit more like:

var openMarker;

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



for (i = 0; i < locations.length; i++) {
    marker = new google.maps.Marker({
        position: new google.maps.LatLng(locations[i][1], locations[i][2]),
        icon: {
            url: 'http://map.vegan.london/wp-content/uploads/map-marker-blue.png',
            size: new google.maps.Size(60, 60)
        },
        map: map,
        index: i
    });

    updateInfowindow(marker, locations[i][0] + ', ' + locations[i][6]);

    marker.addListener('click', function () {
        openMarker = this.index;
    });

    markers.push(marker);
}

$(document).ready(function () {
    function updateMarkers(m) {
        $.each(m, function (i, mkr) {
            pos = new google.maps.LatLng(mkr.position.lat() + .010, mkr.position.lng());
            mkr.setIcon('http://kallyaswp.hogashstudio.netdna-cdn.com/demo/wp-content/uploads/2015/08/map-marker.png');
            mkr.setPosition(pos);
            updateInfowindow(mkr, '<div>Update:'+locations[i][7]+'</div>');

            if (openMarker == i) {
                google.maps.event.trigger(mkr, 'click');
            }
        });
    };
    $('#update').click(function () {
        updateMarkers(markers);
    })
});

Update: You could probably use a global variable to keep track of which marker's been clicked on last. I've added a custom 'index' property to each marker. Then when you update the markers, check each one to see if it's the open one. If so, trigger the click again, which should reopen the infowindow. I think this should work.