• 網頁設計新知
    Knowledge of Design is Food of iBest.
2018/07/21 愛貝斯小編整理 

這個網頁無法正確載入 Google 地圖? Google Map API 開始收費了 愛貝斯網頁設計教你怎麼申請Google MAP API KEY

製作網頁設計都知道,Google Map做為店家的交通指示以及周邊景點功能是相當方便直覺的,重點是免費使用,但最近在網站上看到「這個網頁無法正確載入 Google 地圖」?
小編一驚! 原來是Google Map 2018.07.16以後開始收費了。必須申請google map api key,還必須綁定信用卡才可繼續使用google map。

這個網頁無法正確載入 Google 地圖

網頁設計小編教你怎麼申請google api key,讓您網站上的google map不會被上浮水印。
(其實也只是被放上「開發中 For development purposes only」的浮水印而已,原有功能都正常。)

本篇文章說明順序:
1. 哪種Google Map會被收費?
2. Google Map怎麼收費?是否有免費額度?
3. 如何申請Google Map API KEY?
4. 如何啟用Google Map API?
5. 如何連結信用卡資料?

哪種Google Map會被收費?
首先說明一下,網站使用哪種Google Map不用被收費:
使用分享碼嵌入的Google Map不會被收費,分享碼使用的是iframe的形式來產生地圖,並非在網站內放入google map javascript source。
看到左上角的資訊方框,以及右上角的登入框就是不用收錢的了。
大概是長這樣:
002
會被收費的是自訂Google Map形式,如改地圖顏色、換Map icon、路線導航等都算是會被收費的範疇。(大家都希望自已的網頁設計可以符合企業風格)
這種自訂的Google Map最大的優點就是擴充性高,可以自己標註周邊、換自己喜歡的顏色、拿來算距離等等,
大家最常用的591租屋服務,用的就是自訂的Google Map。可以擴充許多方便的功能,以及做到企業識別的目的。

自訂google map的原理就是網頁設計公司幫您使用google map js source,並加上一組金鑰(api key),再融入前後端工程師的無數辛酸血淚撰寫而成的,大概是長這樣:
014

Google Map怎麼收費?是否有免費額度?
大家最關心的應該是...要收多少錢呢...?
Google Map是用載入次數(response)來計算費用的,目前每個月有200美金的免費額度,約可使用28,000次/月,可以簡單的理解,程式讀到地圖就算一次(這時候就要感謝萬惡的暫存,可以省個幾次...)
如果您是一般中小型的企業,網站使用流量不高倒是不用擔心,這部分可以從GA來評斷您的網頁map會不會被收錢。

※目前不綁定信用卡的話,好像也會直接跳浮水印...

另外也可以自訂收費額度,如果超過免費額度就自動停止服務。事實上也只是被放上「開發中 For development purposes only」的浮水印而已,其實功能都正常。

附上一張Google Map 收費表給大家參考,一般會用到的是「動態地圖」這個選項,每個月可免費使用28,000次載入,超過的話每1,000次收費7美金。
如果用量真的很大的,還是要斗內一下給Google啦。

003


如何申請Google Map API Key?

步驟一:進入Google Cloud Console網址
 
步驟二:登入您的gmail帳號

步驟三:選取專案
004


步驟四:新增專案
005


步驟五:輸入專案名稱(只能打英文)
006


步驟六:再次選取專案
007


步驟七:選取剛剛建立的專案
008


步驟八:建立API憑證
009


步驟九:限制憑證使用(以免被其他網站盜用)
010


步驟十:選擇HTTP網址參照,輸入自己的網址,後面記得+/*,這樣網站上的每一個頁面才能使用喔。
記得同時加上https開頭的網址(網站沒有https也沒關係)
ex:http://www.ibest.com.tw/*
ex:https://www.ibest.com.tw/*

011


步驟十一:將Api Key複製下來給網頁設計廠商
012

如何啟用Google Map API服務?
步驟一:回到資訊主頁,點選啟用api
015

步驟二:選擇查看全部 
016

步驟三:選擇 Maps JavaScript API
017


017

步驟四:重複1~3步驟,啟用Place API、Directions API、Distance Matirx API、Geocoding API。下圖是我們會用到的API,共有5隻。

Image 2


後續就看您網頁設計公司還幫你用了那些功能,就逐一啟用囉!

如何連結信用卡付款資料?

步驟一:點開左上角三條線選項,選擇「帳單」
021

步驟二:連結帳單帳戶
022

步驟三:建立新帳戶
023

步驟四:同意並繼續
024

步驟五:輸入公司公司或個人資料。(每隻筆都可以點選修改,沒有公司戶也可以改個人戶喔!!)。最重要的就是第五點的輸入信用卡資料了....
025

步驟六:前往連結的帳戶
026

步驟七:確認付款貨幣資料
027

步驟八:提交並啟用計費功能
028

步驟九:設定預算
029

步驟十:設定預算
030

步驟十一:把預算設定到190元,以免不小心被扣到錢!!

031

 

熱門標籤

Website DesignOnlineBooking SystemInternet Marketing  全方位網站設計規畫團隊  愛貝斯網路愛貝斯網路有限公司