Polygon events on google maps with javascript

Question

I need to capture the event of DWELL, ENTER, LEAVE of the polygons, can already add them on the map with the following code:

this.map.addPolygon({
    points: geofence,
    strokeColor: '#FF0000',
    strokeOpacity: 0.8,
    strokeWeight: 2,
    fillColor: '#FF0000',
    fillOpacity: 0.35,
    draggable: true,
    geodesic: true
});

Now I am not able to add to listen to input events, output and movements within this area.

How to do this ??

I use the latest version of google maps the v3. Is being developed in ionic 3

I need to basically do this

https://developer.android.com/training/location/geofencing.html

in javascript

Answer 1

To add events to a polygon, you can save the reference to the polygon and assign an event using addListener

For example:

var polygonCoords = [
    {lat: 25.774, lng: -80.190},
    {lat: 18.466, lng: -66.118},
    {lat: 32.321, lng: -64.757},
    {lat: 25.774, lng: -80.190}
];

//Guarda a referencia ao polígono.
var polygon = new google.maps.Polygon({
   paths: polygonCoords,
   strokeColor: '#FF0000',
   strokeOpacity: 0.8,
   strokeWeight: 2,
   fillColor: '#FF0000',
   fillOpacity: 0.35
}); 

//EVENTO
polygon.addListener('mouseout', function() {
   //Faça algo aqui
})

Link to the complete example: click here

I used as an example the event mouseout. Here on this link you can identify all possible events: