2016年3月12日 星期六

Google Developers - Google Maps API

好久之前就摸過 Google Maps API
但是,卻都沒有紀錄下來
這次就從頭來過吧!



大家都知道Google產品不止Maps
還有許多值得研究的技術!!!

只是這次分享的是Google Maps API
接著讓我們到「Google Developers」頁面!

點擊「Maps

點擊「檢視方案」,接著將畫面下拉至「Web
這頁介紹Maps API的各個平台及版本差異和收費標準!
請依實際狀況選擇需要的API方案吧!
選好方案後,會自動導向這頁
按下「取得金鑰」,彈出訊息框「啟用 Google Maps JavaScript API」按「繼續


當沒有建置任何專案的時候,則為下圖所示
選取「」及按下「同意並繼續

憑證」的部分
在「接受這些HTTP參照網址(網站)發出的要求」輸入需要用Maps的網站
再按下「建立
建立完成!
API金鑰建立完成後,接著就是「網域驗證
網域」則是填入你要嵌入Maps的網址,輸入完後請按「新增網域
再按下「立即前往
頁面導向「網站管理員中心」,在「新增資源」輸入要驗證的資源網址
再按「繼續
我選擇「其他方法」做驗證
剛好這方法對我來說,算快和方便
驗證方法還滿多種的
就看自己怎麼選擇了

圖2的第2個紅框所示部分是指,將中繼標記貼到網站的head tag裡面
圖2的第3個紅框是範例或是參考圖1

圖1

按下驗證之前,記得將中繼標記的部分加進去,才會驗證成功!!!
圖2
已驗證完成的畫面
再來看一下驗證後的成果吧!!!


心得:
這篇算是Google Maps API入門

從申請API金鑰到建置完成
照著申請流程走,並沒有遇到太大的困難
很快的就申請好金鑰並驗證完成

但是在我使用fancyBox時遇到了一個問題
不過解決了,其實就是不夠細心
沒有弄清楚fancyBox的設定參數!

沒有留言:

張貼留言