[JS] 第一次使用 GOOGLE MAP - 如何把 GOOGLE map 載入到 HTML 網頁中 -API


前言

在撰寫第一行 google map 地圖之前,要先申請一組API KEY。
 

申請 API KEY

前往這邊這申請一組 API KEY:
https://developers.google.com/maps/documentation/javascript/get-api-key#key

在GOOGLE網頁中,找到 取得 API 金鑰
若要開始使用 Google Maps JavaScript API,請按一下下方按鈕,它將自動引導您完成啟用 Google Maps JavaScript API 與所有相關服務的程序。

按下該網頁中[取得金鑰]的按鈕,輸入專案名稱後便可以取得一組類似這樣的序號:UAYdj2ZZgaYZXedAH35yASPUU
複製好你這組號碼備用。
 

開始製作專屬的 GOOGLE MAP網頁


打開一個網頁編輯器或記事本,把以下貼到裡面並存檔。
注意以下倒數的地方有一行:?key=YOUR_API_KEY
要修改你剛剛申請到的金鑰,也就是改成:?key=UAYdj2ZZgaYZXedAH35yASPUU

<!DOCTYPE html>
<html>
  <head>
    <title>Simple Map</title>
    <meta name="viewport" content="initial-scale=1.0">
    <meta charset="utf-8">
    <style>
      /* Always set the map height explicitly to define the size of the div
       * element that contains the map. */
      #map {
        height: 100%;
      }
      /* Optional: Makes the sample page fill the window. */
      html, body {
        height: 100%;
        margin: 0;
        padding: 0;
      }
    </style>
  </head>
  <body>
    <div id="map"></div>
    <script>
      var map;
      function initMap() {
        map = new google.maps.Map(document.getElementById('map'), {
          center: {lat: -34.397, lng: 150.644},
          zoom: 8
        });
      }
    </script>
    <script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap"
    async defer></script>
  </body>
</html>

這樣,GOOGLE MAP就顯示出來囉。
如果要移動初始的顯示點位置,則需要設置座標位置:
 center: {lat: -34.397, lng: 150.644}, 
 

參考資料

https://developers.google.com/maps/documentation/javascript/tutorial?hl=zh-tw

 
<!DOCTYPE html>
<html>
  <head>
    <title>Simple Map</title>
    <meta name="viewport" content="initial-scale=1.0">
    <meta charset="utf-8">
    <style>
      /* Always set the map height explicitly to define the size of the div
       * element that contains the map. */
      #map {
        height: 100%;
      }
      /* Optional: Makes the sample page fill the window. */
      html, body {
        height: 100%;
        margin: 0;
        padding: 0;
      }
    </style>
  </head>
  <body>
    <div id="map"></div>
    <script>
      var map;
      function initMap() {
        map = new google.maps.Map(document.getElementById('map'), {
          center: {lat: -34.397, lng: 150.644},
          zoom: 8
        });
      }
    </script>
    <script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap"
    async defer></script>
  </body>
</html>

回上一頁

相關文章:

喜歡這篇文章嗎?立即分享

Posted : / Views: 413
Last updated :2017-10-27