CODEWITHSUNDEEP
javascriptgoogle-mapsgoogle-maps-api-3
John
John

Reputation: 3

How to close an infowindow

I have already have an array of markers, I want to close an opened infowindow when I click another marker. I know that with the v3 API, I can close a infowindow with the InfoWindow.close() method.But where to add the code?I have tried a lot but failed. I have another question ,why need I click the link in "side_bar_div" tiwce to call the method myclick(i)?

<script type="text/javascript">
  var markers=[];
  var side_bar_html='<table border=0 cellpadding=0><tr>';
  var tdrow = 1;
  var i = 0;
  function creatmarker(lat,long,map,html,index){
   var mylatlng = new google.maps.LatLng(lat,long);
   var marker = new google.maps.Marker({ 
     position: mylatlng,   
map: map,
zIndex: index
    });
var infowindow = new google.maps.InfoWindow({
  content: html
});
markers.push(marker);
side_bar_html +='<td width=330 valign=top align=left><a id="side_bar_'+i+'" href="javascript:myclick('+ (markers.length-1) +');">'+html+'</a></td>';
tdrow++;
i++;
if (tdrow > 2){side_bar_html += '</tr><tr>'; tdrow =1; }
google.maps.event.addListener(marker,'click',function(){
    infowindow.open(map,marker); 
});
   function myclick(i){
var id="side_bar_"+i;
google.maps.event.addDomListener(document.getElementById(id), "click", function(){          google.maps.event.trigger(markers[i], "click");
});
   }
   function initialize(){
var myOptions = {
       zoom: 11,
       center: new google.maps.LatLng(-33.9, 151.2),
       mapTypeId: google.maps.MapTypeId.ROADMAP
     }
     var map = new google.maps.Map(document.getElementById("mymap"),myOptions);
     var lat = "-33.890542";
     var lng = "151.274856";
     var html = 'Bondi Beach';
     creatmarker(lat,lng,map,html,5);
     var lat = "-33.923036";
     var lng = "151.259052";
     var html = 'Coogee Beach';
     creatmarker(lat,lng,map,html,4);
     var lat = "-34.028249";
     var lng = "151.157507";
     var html = 'Cronulla Beach';
     creatmarker(lat,lng,map,html,3);
     var lat = "-33.80010128657071";
     var lng = "151.28747820854187";
     var html = 'Manly Beach';
     creatmarker(lat,lng,map,html,2);
     var lat = "-33.950198";
     var lng = "151.259302";
     var html = 'Maroubra Beach';
     creatmarker(lat,lng,map,html,1);
     side_bar_html +='</tr></table>';
     document.getElementById("side_bar_div").innerHTML = side_bar_html;
 }
 google.maps.event.addDomListener(window, 'load', initialize);
</script>

Upvotes: 0

Views: 1914

Answers (2)

Kasper Vesth
Kasper Vesth

Reputation: 4113

The correct way to do this is to store it in a local variable and then add an eventlistener like this:

function addeventlistenerinfo(marker, infowindow, i){
    google.maps.event.addListener(marker, 'click', function() {
            if (currentinfowindow)
                currentinfowindow.close();
            infowindow.open(map,marker);
            currentinfowindow = infowindow;
        });
        markersarray[i] = marker;
}

currentinfowindow is a global variable that will only hold the open infowindow if one exists.

No need to use an array or an extra method :)

Upvotes: 0

Kiran
Kiran

Reputation: 20313

Try the following code snippet:

    var infoWindows = [];                                

        google.maps.event.addListener(marker,'click',function(){ 
closeInfowindow(); 
    var infowindow = new google.maps.InfoWindow({ 
  content: html 
}); 
     infowindow.open(map,marker);
infoWindows[0] = infowindow;
    }); 

function closeInfowindow(){
if(infoWindows.length > 0){
infoWindows[0].set("marker",null);
infoWindows[0].close();
infoWindows.length = 0;
}
}

Hope this helps you :-)

Upvotes: 1

Related Questions