在 Google 地图 API 中单击地图中的内置位置（不是标记）时，如何自定义弹出窗口的内容？

Question

我说的是这种弹出窗口，它会在您点击 Google 地图中的商店（等）时出现：

就我而言（一个与 covid 相关的志愿者项目），我们希望将 Google 地图 CTA 上的视图替换为我们网络应用程序中页面的 link，商店信息预填充。这可能是不可能的（如果没有，欢迎指点），但知道 how/whether 您可以自定义弹出窗口是第一件事。

Answer 1

据我了解，您的意图是用您的自定义信息 window 信息替换 POI 的标准 Google 地图信息 window。无法通过 Google 地图 JavaScript API 修改 POI 的预定义信息 windows。但是，您可以阻止 POI 的预定义信息 window 并显示您自己的信息 window。为此，您应该在地图上添加一个点击事件侦听器。每次点击兴趣点，地图都会触发一个类型为google.maps.IconMouseEvent:

的事件

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

因此，如果事件有 placeId 信息，这意味着您点击了 POI，在这种情况下，您可以停止传播事件以阻止标准信息 window 并创建您自己的信息 window.

看看下面的代码片段

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>

希望对您有所帮助！

在 Google 地图 API 中单击地图中的内置位置（不是标记）时，如何自定义弹出窗口的内容？

How can you customize the contents of popups when you click on built-in locations (not markers) in a map from the Google Maps API?

google-maps

google-maps-api-3