Google Maps - информационное окно при наведении курсора на полигон

Question

Я создал область многоугольника на этой странице

Мне нужно создать информационное окно, которое открывается при наведении курсора. Я нашел информацию об открытии информационного окна при щелчке мышью по маркерам, но не по области многоугольника.

<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

добавляет события mouseover и mouseout к многоугольнику:

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;
});

подтверждение концепции скрипки

фрагмент кода:

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

вы добавите mouseover событие к идентификатору div "map"

Код JavaScript:

//Select html element
const mapInfo = document.querySelector("#map");

//add mouseover event to the selected element 
mapInfo.addEventListener ('mouseover', initMap);

Посетите эту ссылку https://developers.google.com/maps/documentation/javascript/infowindows для получения дополнительной информации. Надеюсь, это поможет.