Google Maps 申請 API KEY 方式 (GOOGLE地圖)



載入地圖時出現了一下:
 

糟糕!出了點狀況。
這個網頁並未正確載入 Google 地圖。請查看 JavaScript 控制台,瞭解相關的技術詳情。

js?sensor=false&language=zh-TW:34 Google Maps API error: MissingKeyMapError https://developers.google.com/maps/documentation/javascript/error-messages#missing-key-map-error_.kb @ js?sensor=false&language=zh-TW:34
util.js:210 Google Maps API warning: NoApiKeys https://developers.google.com/maps/documentation/javascript/error-messages#no-api-keysRA.j @ util.js:210
util.js:210 Google Maps API warning: SensorNotRequired https://developers.google.com/maps/documentation/javascript/error-messages#sensor-not-requiredRA.j @ util.js:210


1.步驟1:
取得一組API KEY
Get an API key:

按此申請GOOGLE KEY
在 Google API Console 中為您的應用程式註冊Google Maps JavaScript APIGoogle Maps Geocoding APIGoogle Maps Directions APIGoogle Maps Distance Matrix APIGoogle Maps Elevation APIGoogle Places API Web Service

Google API Console 可讓您管理應用程式及監控 API 用量。

您目前沒有任何專案,系統將建立名為「My Project」的新專案。


2.步驟2:
將憑證新增至您的專案1
瞭解您所需的憑證類型系統將協助您設定正確的憑證 
您可以選擇略過這個步驟,然後繼續建立 API 金鑰、用戶端 ID 或服務帳戶

您目前使用哪個 API?

決定您所需的憑證類型。
Google Maps JavaScript API我需要哪些憑證?
Google Maps JavaScript API




3.步驟3:
建立API 金鑰成功。
建立憑證即可存取您啟用的 API,詳情請參閱 API 說明文件。





4.步驟4:

最後,把以下這段程式碼貼在你原本的網頁原始碼下方即可引用。
貼在顯示地圖的位置上。
範例For example:
<script>
jQuery(document).ready(function(e) {
  // MAP
  loadmap();
  function loadmap() {
    $("#map").gmap3({
        略....
    });
  }

});
</script> <!-- 以上為原先可能的google maps程式碼 -->
<!-- 加上以下這段程式碼 -->
<script async defer src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap"   type="text/javascript"></script>


參考資料:
1.Get a Key/Authentication



 

回上一頁

相關文章:

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

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