Google Maps API - 地圖樣式

Posted on Edited on In Views: Disqus:

 

樣式化地圖可讓您自訂 Google 基本地圖的呈現方式，並變更此類元素（道路、公園、建地區域）的視覺顯示。

<!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 map = new google.maps.Map(document.getElementById('map'), {
                center: { lat: 24.930776, lng: 121.283172 },
                zoom: 12,
                styles: [
                    {
                        featureType: 'road.highway.controlled_access',
                        elementType: 'geometry.stroke',
                        stylers: [{ color: '#ff0000' }]
                    }
                ]
            });
        }
    </script>
    <script async defer src="https://maps.googleapis.com/maps/api/js?key=&callback=initMap"></script>
</body>
</html>

如上例，其作用為，把國道高速公路以 geometry.stroke 選取方式，給塗上紅色。

 

參考資料：

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

樣式參考資料