Как вы можете настроить содержимое всплывающих окон, когда нажимаете на встроенные местоположения (не маркеры) на карте из API Карт Google?

Question

Я говорю об этом всплывающем окне, которое появляется, когда вы нажимаете на магазин (и т. Д. c.) В Картах Google:

В моем случае (волонтерский проект, связанный с covid) мы хотим заменить просмотр в CTA Google Maps ссылкой на страницу в нашем веб-приложении с предварительно заполненной информацией о магазине. Это может быть невозможно (указатели приветствуются, если нет), но прежде всего необходимо знать, как / можно ли вообще настроить всплывающее окно.

Answer 1

Как я понимаю, вы намерены заменить стандартное информационное окно Карт Google для POI информацией о вашем пользовательском информационном окне. Невозможно изменить предопределенную информацию windows POI через API Карт Google JavaScript. Однако вы можете запретить предварительно определенное информационное окно POI и вместо этого показать свое собственное информационное окно. Для этого вы должны добавить прослушиватель событий щелчка на вашей карте. Каждый раз, когда вы нажимаете на POI, карта будет вызывать событие типа google.maps.IconMouseEvent:

https://developers.google.com/maps/documentation/javascript/reference/map#IconMouseEvent

Итак, если событие имеет placeId информацию , это означает, что вы нажали POI, в этом случае вы можете остановить распространение события, чтобы запретить стандартное информационное окно и создать свое собственное информационное окно.

Посмотрите на следующий фрагмент кода

var map;
function initMap() {
  map = new google.maps.Map(document.getElementById('map'), {
    center: {lat: 17.414571, lng: 78.480922},
    zoom: 19
  });
  var infowindow = new google.maps.InfoWindow();
  map.addListener('click', function(event){
    if (event.placeId) {
      event.stop();
      infowindow.close();
      infowindow.setPosition(event.latLng);
      infowindow.setContent(
        '<div>'
        + '<strong>You clicked place</strong><br>' 
        + 'Place ID: ' + event.placeId + '<br>' 
        + 'Position: ' + event.latLng.lat() + ',' + event.latLng.lng() + '<br>' 
        + 'Put here information that you need' 
        + '</div>');
      infowindow.open(map);
    }
  });
}

#map {
  height: 100%;
}
html, body {
  height: 100%;
  margin: 0;
  padding: 0;
}

<div id="map"></div>
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDztlrk_3CnzGHo7CFvLFqE_2bUKEq1JEU&callback=initMap"
    async defer></script>

Надеюсь, это поможет!