Google Maps API - Hello world

Posted on 2015-06-02 Edited on 2023-11-24 In Google API Views: Disqus:

如何使用google maps api呢?請參考下面範例與說明如下

<!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: 15
            });
        }
    </script>
    <script async defer src="https://maps.googleapis.com/maps/api/js?key=&callback=initMap"></script>
</body>
</html>

1、center 與 zoom 參數是必需的。

2、如果你網站流量很大時，可考慮申請個api key，

key 的參數範例如下

<script src="http://maps.googleapis.com/maps/api/js?key=YOUR_KEY"></script>

Tip：如果你還沒有申請 api key 時，則不需要特別放置 key 參數。

3、替地圖再加上標記

<!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
            });

        <span style="color: #008000; font-weight: bold">var</span> marker <span style="color: #666666">=</span> <span style="color: #008000; font-weight: bold">new</span> google.maps.Marker({
            position<span style="color: #666666">:</span> myCenter,
            map<span style="color: #666666">:</span> map
        });
    }
<span style="color: #008000; font-weight: bold">&lt;/script&gt;</span>
<span style="color: #008000; font-weight: bold">&lt;script </span><span style="color: #7D9029">async</span> <span style="color: #7D9029">defer</span> <span style="color: #7D9029">src=</span><span style="color: #BA2121">&quot;https://maps.googleapis.com/maps/api/js?key=&amp;callback=initMap&quot;</span><span style="color: #008000; font-weight: bold">&gt;&lt;/script&gt;</span>

</body>
</html>