如何使用JavaScript在Google Maps中的標記上顯示標簽（InfoWindow）？

Question

我正嘗試在Google地圖標記中顯示標簽，如下圖所示。 我該如何實現？ 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!'
        });
    }

Answer 1

要在標記上顯示InfoWindow ，請參見doumentation中的示例 。

將此添加到您現有的代碼：

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

概念證明

代碼段：

 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>