如何使用 JavaScript 在 Google 地图中的标记上显示标签（信息窗口）？答案

【问题标题】：How do I display label (InfoWindow) over marker in Google Maps with JavaScript?如何使用 JavaScript 在 Google 地图中的标记上显示标签（信息窗口）？
【发布时间】：2019-12-16 14:03:10
【问题描述】：

我正在尝试在谷歌地图标记中显示一个标签，如下图所示。我如何实现这一目标？ https://ibb.co/nRGn1pG

function initMap() {

        var myLatlng = new google.maps.LatLng(42.3730492, -71.0499857);
        var mapOptions = {
            zoom: 15,
            center: myLatlng,
            styles: [
                {
                    "elementType": "geometry",
                    "stylers": [//ignore this]
        };
        var map = new google.maps.Map(document.getElementById('map'),
            mapOptions);

        var marker = new google.maps.Marker({
            position: myLatlng,
            map: map,
            title: 'Dryft Revere!'
        });
    }

【问题讨论】：

标签： javascript google-maps google-maps-api-3 google-maps-markers

【解决方案1】：

要在标记上显示InfoWindow，请参阅this example in the doumentation。

将此添加到您现有的代码中：

var infoWindow = new google.maps.InfoWindow({
  content: "Pier 6"
});
marker.addListener('click', function(evt) {
  infoWindow.open(map, marker);
});

proof of concept fiddle

代码 sn-p：

function initMap() {
  var myLatlng = new google.maps.LatLng(42.3730492, -71.0499857);
  var mapOptions = {
    zoom: 15,
    center: myLatlng,

  };
  var map = new google.maps.Map(document.getElementById('map'),
    mapOptions);

  var marker = new google.maps.Marker({
    position: myLatlng,
    map: map,
    title: 'Dryft Revere!'
  });
  var infoWindow = new google.maps.InfoWindow({
    content: "Pier 6"
  });
  marker.addListener('click', function(evt) {
    infoWindow.open(map, marker);
  });
  google.maps.event.trigger(marker, "click");
}

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

<div id="map"></div>
<!-- Replace the value of the key parameter with your own API key. -->
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk&callback=initMap" async defer></script>

【讨论】：