Google Map looped markers wont close previous infowindow

Question

Using a loop to show markers on Google Maps, I am finding that previous windows wont close even though I have a listener

Here is my code (set to limit number to 50 deliberately) that displays a marker if a user has location info set

    function loadGmodule() {

      var map = new google.maps.Map(
        document.getElementById('gmashup'), {
          center: new google.maps.LatLng(20, 0),
          zoom: 1,
          mapTypeId: google.maps.MapTypeId.ROADMAP
      });



      for (var i=0;i<50;i++) {

      u = users[i];

      if (u.lat) {


      marker = new google.maps.Marker({
            position: new google.maps.LatLng(u.lat, u.lang),
            map: map
      });

      infoContent[i] = '<table ><tr><td><img src=\"'+u.avatar+'\" width=\"60\" height=\"75\"></td>';
      infoContent[i] = infoContent[i] + '<td><b><a href=\"index.php?option=com_comprofiler&task=userProfile&user='+u.user_id+'&Itemid=100004\">'+u.firstname+' '+u.middlename+' '+u.lastname+'</a></b><br />'+u.designation + '<br />'+u.company+'<br />'+u.city+'</td>';
      infoContent[i] = infoContent[i] + '</tr></table>';

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

      infoWindow.setContent(infoContent[i]);

      addInfoWindowOnEvent(marker, infoWindow, map, 'click');

      }

      }

}

and the function / listener

function addInfoWindowOnEvent(marker, infoWindow, map, event) {
    google.maps.event.addListener(marker, event, function () {
        infoWindow.close();
        infoWindow.open(map, marker);
    });
}

Can anyone advise the best location to put the infoWindow.close() so that previous windows will shut when another pin is clicked.

Thanks in advance for any assistance

Marked down in reputation and no help because it 'might' have a duplicate. Well I read your 'duplicate' and none of them answer my question as to why my completed code close command supplied is not closing windows. I take it anyone who so much as mentions Google maps api will now get downgraded? Thanks for the great community spirit and making sure I get no help due to the downgrade — MOLEDesign, Feb 23 '14 at 00:05
Yup, just gone through again, and there is only one example of a close, and thats a mouseover mouse out.. two completely separate events which are easy. Not one example that is like mine with the same event. So, no, not a duplicate. — MOLEDesign, Feb 23 '14 at 00:10

score 0 · Answer 1 · edited May 23 '17 at 11:50

Even though the edited indicated a duplicate, it was not to be found in the supplied link.. HOWEVER (even though I think this is a hack, but it will do) there was an answer here which worked

Google Maps API v3 (one infowindow open at a time)

I changed my function to

function addInfoWindowOnEvent(marker, infoWindow, map, event) {
    google.maps.event.addListener(marker, event, function () {
    if($('.gm-style-iw').length) {
         $('.gm-style-iw').parent().remove();
    }
    infoWindow.open(map,marker);
    });
}

and now only one window stays open

score 0 · Answer 2 · answered Feb 23 '14 at 07:44

For each marker you are creating new infowindow. If you want to close previous infowindow and have only one opened then it is enough to create only one infowindow. It should be global:

var infoContent = [];
var infoWindow;

function loadGmodule() {
    var map = new google.maps.Map(
    ...
infoWindow = new google.maps.InfoWindow();

//for (var i = 0; i < 50; i++) {
for (var i = 0; i < users.length; i++) {
...

and then provide specific content to event listener:

            ...
            infoContent[i] = infoContent[i] + '</tr></table>';

            //infoWindow = new google.maps.InfoWindow();
            //infoWindow.setContent(infoContent[i]);
            addInfoWindowOnEvent(marker, infoContent[i], map, 'click');
        }
    }
}


function addInfoWindowOnEvent(marker, infoContent, map, event) {
    google.maps.event.addListener(marker, event, function () {
        infoWindow.close();
        infoWindow.setContent(infoContent)
        infoWindow.open(map, marker);
    });
}

Google Map looped markers wont close previous infowindow

2 Answers2