CODEWITHSUNDEEP
javascriptgoogle-mapsgoogle-maps-api-3event-listener
FajitaNachos
FajitaNachos

Reputation: 1020

Google Maps API: infoWindow flickers/closes automatically because of mouseout event

I'm in the midst of creating polygons on a spiffy new project I am working on. The problem arises whenever you hover over the infoWindow, the mouseout event on the polygon fires. I don't want the mouseout event to fire unless the mouse moves outside of the polygon AND the infoWindow. Any ideas? Here's most of the relevant code. 

    infoWindow = new google.maps.InfoWindow({
          content: myContent
    });

    var polygon = new google.maps.Polygon({
          paths: polygonPath,
          strokeColor: data.color,
          strokeOpacity: 0.5,
          strokeWeight: 0,
          fillColor: data.color,
          fillOpacity: 0.5,
          id:polygonId,
          name: data.name,
          shortDesc: data.short_desc,
          map: map 
    }); 


    google.maps.event.addListener(polygon, 'click', function(e){
          infoWindow.open(map);
          infoWindow.setPosition(e.latLng);
    });

    google.maps.event.addListener(polygon, 'mouseout', function(){
          infoWindow.close();
    });

Upvotes: 6

Views: 4161

Answers (1)

Dr.Molle
Dr.Molle

Reputation: 117334

Instead of mouseout of the polygon observe mousemove for the map(this will not fire when the mouse moves over the polygon or the infowindow)

google.maps.event.addListener(polygon, 'click', function(e){
      infoWindow.open(map);
      infoWindow.setPosition(e.latLng);
      google.maps.event.addListenerOnce(map, 'mousemove', function(){
        infoWindow.close();
      });
});

Upvotes: 16

Related Questions