Google Maps - infoWindow on mouseover of polygon - google-maps-api-3

Question

I created a polygon area on this page
I need to create an infoWindow that opens on mouseover. I found information on opening an infoWindow on mouseclick on markers but not on a polygon area.
<div id="map"></div>
<script>
// This is a simple polygon representing the MRPD Rescue Zone.
function initMap() {
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 9,
center: {lat: -16.4836, lng: 145.4653},
mapTypeId: 'terrain'
});
// Definition of the LatLng coordinates for the polygon's path.
var polygonCoords = [
{lat: -16.4836, lng: 145.4653},
{lat: -16.4500, lng: 145.4133},
{lat: -16.2319, lng: 145.4763},
{lat: -16.0878, lng: 145.4548},
{lat: -16.0454, lng: 145.9000},
{lat: -16.4861, lng: 146.1269},
{lat: -16.7229, lng: 145.6500},
{lat: -16.5913, lng: 145.5192},
];
// Construction of polygon.
var mrpdPolygon = new google.maps.Polygon({
paths: polygonCoords,
strokeColor: '#FF0000',
strokeOpacity: 0.6,
strokeWeight: 1,
fillColor: '#FF0000',
fillOpacity: 0.10
});
mrpdPolygon.setMap(map);
}
</script>
<script async defer
src="https://maps.googleapis.com/maps/api/js?key=API_Key&callback=initMap">
</script>

Answer 1

add a mouseover and mouseout event to the polygon:
function mousefn(evt) {
infowindow.setContent("polygon<br>coords:" + bounds.getCenter().toUrlValue(6));
infowindow.setPosition(bounds.getCenter()); // or evt.latLng
infowindow.open(map);
}
google.maps.event.addListener(mrpdPolygon, 'mouseover', mousefn);
google.maps.event.addListener(mrpdPolygon, 'mouseout', function(evt) {
infowindow.close();
infowindow.opened = false;
});
proof of concept fiddle
code snippet:
html,
body,
#map {
height: 100%;
width: 100%;
margin: 0px;
padding: 0px
}
<div id="map"></div>
<script>
// This is a simple polygon representing the MRPD Rescue Zone.
function initMap() {
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 9,
center: {
lat: -16.4836,
lng: 145.4653
},
mapTypeId: 'terrain'
});
// Construction of polygon.
var mrpdPolygon = new google.maps.Polygon({
paths: polygonCoords,
strokeColor: '#FF0000',
strokeOpacity: 0.6,
strokeWeight: 1,
fillColor: '#FF0000',
fillOpacity: 0.10
});
mrpdPolygon.setMap(map);
var bounds = new google.maps.LatLngBounds();
for (var i = 0; i < mrpdPolygon.getPath().getLength(); i++) {
bounds.extend(mrpdPolygon.getPath().getAt(i));
}
var infowindow = new google.maps.InfoWindow();
infowindow.opened = false;
function mousefn(evt) {
infowindow.setContent("polygon<br>coords:" + bounds.getCenter().toUrlValue(6));
infowindow.setPosition(bounds.getCenter());
infowindow.open(map);
}
google.maps.event.addListener(mrpdPolygon, 'mouseover', mousefn);
// google.maps.event.addListener(mrpdPolygon, 'mousemove', mousefn);
google.maps.event.addListener(mrpdPolygon, 'mouseout', function(evt) {
infowindow.close();
infowindow.opened = false;
});
}
// Definition of the LatLng coordinates for the polygon's path.
var polygonCoords = [{
lat: -16.4836,
lng: 145.4653
},
{
lat: -16.4500,
lng: 145.4133
},
{
lat: -16.2319,
lng: 145.4763
},
{
lat: -16.0878,
lng: 145.4548
},
{
lat: -16.0454,
lng: 145.9000
},
{
lat: -16.4861,
lng: 146.1269
},
{
lat: -16.7229,
lng: 145.6500
},
{
lat: -16.5913,
lng: 145.5192
},
];
</script>
<script async defer src="https://maps.googleapis.com/maps/api/js?callback=initMap"></script>

Answer 2

you will add mouseover event to the div id "map"
JavaScript code:
//Select html element
const mapInfo = document.querySelector("#map");
//add mouseover event to the selected element
mapInfo.addEventListener ('mouseover', initMap);
Visit this https://developers.google.com/maps/documentation/javascript/infowindows link for more information. I hope this helps.