網站內嵌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 高興

使用GMAIL於網頁表單寄信的權限

使用GMAIL於網頁表單寄信時,可能常常遇到權限問題,可能遇到以下錯誤
(我是使用phpmailer)

Cannot authenticate due to temporary system problem

或是

5.5.1 Authentication required

因為常常gmail權限更改覺得很煩

後來覺得使用 專屬密碼 這個方式很不錯

先啟用 2步驗證

https://myaccount.google.com/signinoptions/two-step-verification/enroll-welcome?pli=1

然後 設定專屬密碼

https://security.google.com/settings/security/apppasswords?pli=1

這個專屬密碼 可以用來用在你的 gmail寄信程式的密碼

像這樣會獲的一次 16碼的 密碼

07899

然後將 16碼的密碼 放置在你的網頁寄信程式裡

077777

測試後,覺得棒!!

(爾後兩步驗證可以關閉,要使用應用程式密碼就要開啟兩步驗證去設定,但是設定好後,是可以關閉兩步驗證的,不影響應用程式密碼。)

 

2017/10/31 補充 G Suit的權限

如果是使用G Suit,要請G Suit管理員去網域控制台

登入您的 Google 管理控制台。
請使用「管理員帳戶」(而非目前使用的帳戶) 登入link7311@gmail.com。

在管理控制台資訊主頁中,依序前往 [安全性] 接著 [基本設定]。

如要在資訊主頁中查看 [安全性],請按一下底部的 [更多控制項]。

在「低安全性應用程式」之下,選取 [開啟「低安全性應用程式」設定]。

然後再請使用該mail的帳號人員去 “開啟低安全性"

https://myaccount.google.com/lesssecureapps

低安全性

 

2021/03/11 補充 要 啟用帳戶存取權
這是在IT邦幫忙找到的
https://ithelp.ithome.com.tw/questions/10187930
裡面sfwejfish作者提到如下 :
表示除了低安全性之外,還要授權存取權限(這個動作在程式移動到新主機就要做一次)
https://accounts.google.com/b/0/DisplayUnlockCaptcha
因為我是換了新的寄信帳號,但我今天有開了低安全性,也開了16位專用密碼,但還是失敗,結果今天用了上面網址,啟用帳戶存取權,後居然成功了,(但我密碼沒有用16位專屬密碼,是用信箱本身的密碼後來寄信成功了)

很好設計 高興