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

 for (var n = 0 ; n <listFavourite.length ; n++)
                    //var favouriteObject =listFavourite[n];
                       addMarker(listFavourite[n]);
                   }           
                   function addMarker(data) {
                       var marker = new google.maps.Marker({
                           position: new google.maps.LatLng(data.lattitude, data.longitude),
                           map: map,
                           title: data.address
                       });

                       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>';                                                   
                       var infowindow = new google.maps.InfoWindow({
                       maxWidth: 10,
                       });              
                       google.maps.event.addListener(marker, "click", function() {                     
                           infowindow.setContent(contentString);
                           infowindow.open(map, marker);                       
                       });     
                   };

i tried all the answers here but not able to work it properly
Any suggestions or help Would be appreciated

Answer 1

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>
...