# Google map API ###### tags: `googlemap` `gcp` ### GCP 介紹 > Google雲端平台是一系列由Google提供的雲端運算服務，在執行Google搜尋和YouTube的伺服器上 提供基礎設施服務、平台服務及無伺服器計算環境。除了提供管理工具外，Google雲端平台還提供了一系列模組化雲服務，包括：雲端運算、 資料儲存、資料分析及機器學習等。 > 取自 GCP 維基百科介紹 ## GCP 服務註冊 ### GCP 建立專案 連線至 [Google Cloud Platform](https://console.cloud.google.com/) 點擊紅框處 開專案列表，在彈出來的視窗 點擊右上角 **新增專案** ![](https://imgur.com/eH6RTBM.png) 建立新的專案 ![](https://imgur.com/1V0c8m3.png) 建立完專案後，會回到專案資訊主頁，可以確認如下圖紅框處是否為剛剛建立的專案名稱 ![](https://imgur.com/urkyrvo.png) 參考: [官方文件/建立專案](https://developers.google.com/maps/documentation/javascript/cloud-setup?hl=zh-tw) --- ### 建立 google map for JS API 服務 打開 GCP 提供的 API及服務 程式庫 ![](https://imgur.com/OOcmKxj.png) 點選這次專案需要的服務，**Maps JavaScript API** (如果沒有的話, 用搜尋框搜尋如上文字) ![](https://imgur.com/66lPMbO.png) 啟用 **Maps JavaScript API** 服務 ![](https://imgur.com/tyT0BfH.png) > 到這時候 Maps JavaScript API 的服務就算正式啟用了，但是離可以使用服務還差一個步驟會在下一步說明，那其他的服務如 Maps SDK for IOS, Gmail API ...等,也可以使用上述介紹的步驟開啟服務。 參考: [官方文件/建立專案](https://developers.google.com/maps/documentation/javascript/cloud-setup?hl=zh-tw) --- ### 建立 API 金鑰 進到專案下的 **Google地圖平台** 主頁， 並進入 **憑證頁** (如果不在google地圖平台頁的話，可以使用 *搜尋產品和資源* 輸入框搜尋並進到google地圖平台頁) ![](https://i.imgur.com/i6NZ9UB.jpg) 點選紅框處的 **API 金鑰** ，建立所需的金鑰 ![](https://i.imgur.com/waRowrf.jpg) 就會看到建立好的 API 金鑰 ![](https://i.imgur.com/E7URiwG.jpg) 關閉上方的彈窗，可以在憑證頁看到我們剛剛建立的金鑰，左邊的紅框可以複製金鑰字串，右圖的紅框可以對API金鑰進一步限制，在後面的章節會提到 ![](https://i.imgur.com/cSMaZ1c.jpg) 參考: [官方文件/建立專案](https://developers.google.com/maps/documentation/javascript/get-api-key?hl=zh-tw) ## 建立第一個基本的 google 地圖物件 ### 插入引用資源 先建立一個html基本模板，插入[文件](https://developers.google.com/maps/documentation/javascript/get-api-key?hl=zh-tw#add_key)上提供的 JS 資源(如下方程式碼 20 行) ```html= <!DOCTYPE html> <html> <head> <title>Add Map</title> <style> #map { height: 400px; width: 100%; } </style> </head> <body> <!-- 到時 google map 會長在裡面 --> <div id="map"></div> <!-- Async script executes immediately and must be after any DOM elements used in callback. --> <!-- 下面的 YOUR_API_KEY 要取代為在自己在上面章節建立的金鑰 --> <script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap&libraries=&v=weekly" async ></script> <script> <!-- 我的地圖物件放這裡 --> </script> </body> </html> ``` ### 建立地圖基本物件 在如上方程式碼 第 25 行的位置，插入如下程式碼 ```html= // Initialize and add the map function initMap() { // The location of Uluru const uluru = { lat: -25.344, lng: 131.036 }; // The map, centered at Uluru const map = new google.maps.Map(document.getElementById("map"), { zoom: 4, center: uluru, }); // The marker, positioned at Uluru const marker = new google.maps.Marker({ position: uluru, map: map, }); } ``` 做到這 應該就可以看到如下圖，有 google 地圖物件 出現在網頁中了。 ![](https://i.imgur.com/YCcY4L2.png) 參考: [官方文件/新增大頭針到地圖上](https://developers.google.com/maps/documentation/javascript/adding-a-google-map?hl=zh-tw) --- #### 資源連結: https://www.letswrite.tw/google-map-api-marker-custom/ https://developers.google.com/maps/documentation/javascript/overview?hl=zh-tw https://developers.google.com/maps/documentation/javascript/shapes https://ithelp.ithome.com.tw/articles/10190718 https://developers.google.com/maps/documentation/directions/get-directions