Google Maps API - 資訊視窗

Posted on 2018-05-02 Edited on 2023-11-24 In Google API Views: Disqus:

<!DOCTYPE html>
<html>
<head>
    <title>Simple Map</title>
    <meta name="viewport" content="initial-scale=1.0">
    <meta charset="utf-8">
    <style>
        #map {
            width: 500px;
            height: 380px;
        }
    </style>
</head>
<body>
    <div id="map"></div>
    <script>
        function initMap() {
            var position = { lat: 24.967348, lng: 121.221130 };
            var map = new google.maps.Map(document.getElementById('map'), {
                zoom: 16,
                center: position
            });
            var marker = new google.maps.Marker({
                position: position,
                map: map,
                icon: 'https://i.imgur.com/iGcfg67.png',
                zIndex: 999
            });
            //InfoWindow 建構函式
            var content = '<h6>機場捷運<h6>' + '<p>A21 環北站</p>';
            var infowindow = new google.maps.InfoWindow({
                content: content
            });
            //當標記陂 click 時，則代入 map 物件與標記物件並執行 infowindow 秀出方法，
            //InfoWindow 內容將會依照標記物件的相對位置秀在 map 物件上
            marker.addListener('click', function () {
                infowindow.open(map, marker);
            });
        };
    </script>
    <script async defer src="https://maps.googleapis.com/maps/api/js?key=&callback=initMap"></script>
</body>
</html>

說明：

1、InfoWindow 可以讓你在地圖上方的指定位置，於彈出式視窗中顯示內容。

2、如果您想在標記上顯示單一文字字元，可以使用標記，而不需動用到 InfoWindow。

3、為了達到最佳的使用者體驗，在地圖上應該一次只開啟一個資訊視窗。

參考資料：

https://developers.google.com/maps/documentation/javascript/infowindows