Google maps: infowindow is not closing

Question

My infowindows are not closing automatically when i click on the other marker.. here the code : http://pastebin.com/PvCt2z7W here is the code for markers with infowindows

Answer 1

The other option to using function closure (which basically involves using a createMarker function) is to save the content of the infowindow in a property of the marker. It still is simplest with a single infowindow. You haven't provided enough context in your pastebin to give you a working example that does that.

Here is an example that uses function closure to associate the infowindow content with the marker and has a single infowindow (translated from Mike Williams' v2 tutorial).

http://www.geocodezip.com/v3_MW_example_map3.html

Mike Williams' description of function closure

Here is an example that doesn't use function closure (it stores the infowindow content in a property of the marker object):

http://www.geocodezip.com/v3_MW_example_map3_noclosure.html

Answer 2

Instead of creating one infowindow for each marker, have one global infowindow variable. Then all you're doing in your marker click handler is updating the content for the marker each time. However your code will require this to be done with a closure, otherwise you're going to get each marker having the last marker's content.

var infowindow = new google.maps.InfoWindow({
   maxWidth: 10
});

var arrMarkers = [];

function addMarker(data) {
   var marker = new google.maps.Marker({
       position: new google.maps.LatLng(data.lattitude, data.longitude),
       map: map,
       title: data.address
   });

    arrMarkers.push(marker);

   var contentString = '<div id="content">'+
       '<div id="siteNotice">'+
       '</div>'+
       '<h2 id="firstHeading" class="firstHeading">'+data.name+'</h2>'+
       '<div id="bodyContent">'+
       '<p>'+data.address+'</p>'+
       '<p></p>'+
       '<p>Do You Want to change search location</p>'+
       '<input name="yes" id="yes" type="button" class="btn-common" value="Yes"/>'+
       '</div>'+
       '</div>';                                                   


    // add an event listener for this marker
    bindInfoWindow(marker, map, infowindow, contentString);   
}


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

function clickLink(ID) {
    google.maps.event.trigger(arrMarkers[ID], 'click');
}

Your HTML of sidebar links might look like:

<a href="javascript:clickLink(0); return false;">Link 1</a><br>
<a href="javascript:clickLink(1); return false;">Link 2</a><br>
...