Google Maps API, mouseover listener won't fire, sometimes

I have a case where I'm binding a circle to a drag-able marker to show a radius. This is written from a PHP script so the $ and \" below are php variables and delimiters that are written to the SCRIPT

// Add circle overlay and bind to marker var circle = new google.maps.Circle({ map: map, strokeWeight: 1, radius: 1609*$miles[$i], // 8 miles in metres fillOpacity: 0 }); circle.bindTo('center', marker, 'position');

Then I draw polygons

var blockpolygon = new google.maps.Polygon({ paths: blockcoords, strokeColor: '$color', strokeOpacity: 0.8, strokeWeight: 1, fillColor: '$color', fillOpacity: $fillopacity }); blockpolygon.setMap(map);

Finally, I want to trigger a mouseover event and change a display for each polygon

blockpolygon.addListener(\"mouseover\",function(e){ $(\"div#area\").html(info$i); });

Draws and works just fine, except, when the polygon is inside the circle, mouseover won't fire.

When the polygon is outside the circle, mouseover fires.

If I drag the marker away from the polygon, the circle follows, and when the polygon is no longer in the circle, mouseover fires.

the events on the marker are click, rightclick, and dragend

Any clue how to make the mouseover fire when it's inside the circle?

NOT sure why this is off topic, but I figured out the answer.

In the circle definition add:

clickable: false

Then in works as intended.

1 answer

  • answered 2018-03-13 21:34 Farhan

    Try this, hope this will help you