Google Maps API - 標記形狀

Posted on Edited on In Views: Disqus:

 

Google Maps - Overlays

標記的呈現有多種形狀，分別為Marker、Polyline、Polygon、

Circle and Rectangle、Info Windows、Custom overlays

一、Marker 範例

<!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 myCenter = { lat: 24.930776, lng: 121.283172 };
            var map = new google.maps.Map(document.getElementById('map'), {
                center: { lat: 24.930776, lng: 121.283172 },
                zoom: 15,
                mapTypeId: 'roadmap'
            });
            var marker = new google.maps.Marker({
                position: myCenter,
                map: map
            });
        }
    </script>
    <script async defer src="https://maps.googleapis.com/maps/api/js?key=&callback=initMap"></script>
</body>
</html>

 

二、Polyline 範例

<!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 myCenter = { lat: 24.930776, lng: 121.283172 };
            var map = new google.maps.Map(document.getElementById('map'), {
                center: { lat: 24.930776, lng: 121.283172 },
                zoom: 15,
                mapTypeId: 'roadmap'
            });
            var flightPlanCoordinates = [
                { lat: 24.930000, lng: 121.283000 },
                { lat: 24.930999, lng: 121.283999 },
            ];
            var flightPath = new google.maps.Polyline({
                path: flightPlanCoordinates,
                geodesic: true,
                strokeColor: '#FF0000',
                strokeOpacity: 1.0,
                strokeWeight: 2,
                map: map
            });
        }
    </script>
    <script async defer src="https://maps.googleapis.com/maps/api/js?key=&callback=initMap"></script>
</body>
</html>

 

參考資料：

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