網站內嵌google map API無法顯示其實是缺少金鑰API KEY

可能遇到上傳正式網站後,網站內嵌google map API無法顯示

其實是缺少金鑰API KEY

01

 

這邊將如何取的金鑰,以及如何加回程式內,讓網站內嵌google map API正常顯示

首先我們到google maps API來

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

按下左邊的 “取得金鑰"

02

進入後,再來往下可以看到 GET A KEY 按鈕,點擊進去。

03

 

然後會進入很惶恐的白介面,(開始緊張雞雞縮很小)不要緊張,點選左側三槓選單

04

再來選擇API管理員

05

 

 

然後選擇 Google APIs右邊的選單

建立專案

06

 

建立專案後,要改名,不然會是 My Project,在最右邊小點點,點選後,下方"專案設定"

07

 

這邊我們改成good-map(隨你取名拉)

08

 

改完名稱後,我們依樣選擇左邊三槓選單 -> API管理員 ->下方憑證

09

 

 

然後我們建立憑證 -> 請幫我選擇

10

 

選擇 Google Maps JavaScript API ->再點擊 我需要那些憑證

11

 

然後你取得API金鑰了 在我圖片馬賽克那欄位 -> 完成

12

 

這時候 會出現 API金鑰 ->點擊進入設定

13

 

然後這個應用金鑰的名稱隨你取,我自己取map2 -> 金鑰限制 選擇 HTTP參照網址

->下方填入你的網址 XXX.com.tw  或xxx.com (反正就是你的網站網址) ->儲存

14

 

最後一步 先去上個廁所買個飲料 約莫5分鐘回來,將API金鑰填回你的網站程式內,填哪裡呢?

一般來說你有用map API  都會用下面這個script

<script src="http://maps.google.com/maps/api/js"></script>

js後面加上 ?key=你的金鑰 。如下。

<script src="http://maps.google.com/maps/api/js?key=你的金鑰"></script>

15

 

然後上傳你剛改好的程式,再重新整理一下網頁,OH WTF 出來了耶,

心得是,真麻煩,E04。

16

 

2017/07/15 更新

如果還是不行,需啟用 Google Maps JavaScript API

啟用

 

KaoHsing 高興