Google Map API使用

1. Create API key

Google Cloud Platform

ref : https://console.cloud.google.com/?hl=zh-TW

1. 確認有沒有專案repository
   如果沒有要新建立一個專案(it shoulde be one repository at least)
   

2. 取用API & Services

   • 選單中選取API和服務(API & Services)

   • 選擇資訊主頁(Dashboard) => 啟用API和服務(Enable APIS & SERVICES)
     

   • 選擇Maps Javascript API and 啟用(Enable)
     

3. 新增憑證

   • 啟用後進入到Maps Javascript的管理(Manage)頁面並選取憑證(credentials)
     

   • API管理員中的「憑證」頁面(Credentials in the API Manager)

   • 建立憑證(Create credentials) => API key
     

2. How to use in Javascript

2.1 Google maps docs

ref : https://developers.google.com/maps/documentation/javascript/tutorial

1. API key要放在script src中的’YOUR_API_KEY’的位置。
   script code 如下：

   <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>

   上面的document.getElementById(‘map’)，代表在html中需要有個div class=”map”。

2. Latitude & Longitude 緯度與經度取得

   • 可以從網站上獲得
     => https://www.latlong.net/
   • google map上點擊位置後,從網址中可以撈到

常見應用

下拉式選單切換地區資料

街景服務

官方範例

geomask