Google maps: infowindow is not closing

问题

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

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

回答2:

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

来源：https://stackoverflow.com/questions/12953332/google-maps-infowindow-is-not-closing

标签

google-maps-api-3

infowindow