21
Jul.18
網頁新知

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

回上一頁

網頁無法正確載入 Google 地圖?

製作網頁設計都知道,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. 如何連結信用卡付款資料?
  6. 如何設定API配額(避免超量使用被收費)?

哪種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 收費表給大家參考,一般會用到的是「動態地圖 Dynamic Maps」這個選項,每個月可免費使用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

如何設定預算?

設定預算的目的是為了超量前收到通知,但這只是通知喔!並沒有停止API運作的功能。必須要再進一步設定API配額才行,讓我們耐心繼續看下去。

步驟一:點選帳單 > 預算與快訊

029

步驟二:設定預算

030

步驟三:設定預算名稱後下一步

google map預算設定01

步驟四:可以把目標數字設定為190。這邊小編是選擇不勾選「在費用中納入抵免額」選項


google map預算設定02

如何設定API配額,避免超量被收取費用?

步驟一:點開左上角三條線選單,API和服務 > 資訊主頁

設定配額-001
 

步驟二:選擇Maps JavaScript API

設定配額-002
 

步驟三:選擇配額後,下方表格選擇Map Loads per day

設定配額-003
 

步驟四:設定配額(每日)為1,000次

設定配額-004

由於每個月200美金的免費配額為28,000次,小編在這邊算個整數,每日1,000次,超過就算斗內給google了...。如果無論如何都不想被超收的話,可以設定900次,甚至更低。
但必須注意,這樣限制等於每天只有前900個使用者可以看的到網站上的地圖功能喔。


林林總總超多步驟,有用的話就幫忙分享喔!


19.08.07不斷更新!!!!
如果是在這天以前設定的google服務,有很大機率會被歸為免費版。
當你登入Google Cloud Plateform介面的時候,最上方應該會出現有一條升級訊息。
點下去後按確認,等個1小時就可以繼續正常使用了。
不過還是建議回頭確認一下預算設定有沒有超過200元喔!!
 

網頁設計文章推薦

1. 【UX/UI設計是什麼?】強化使用者的網站體驗,SEO經驗談
2. 【飯店/民宿網頁設計】消費者要的不只是一張床,UX/UI設計談
3. 【如何選擇網站設計素材?】應該使用圖庫照片,還是請攝影商來拍照?
4. 【CIS企業識別的重要性】網站想要做的好,企業識別不能少
5. 【 SEO 文案怎麼寫才好看?】排名很重要,排版更重要!
6. 【深色主題的網頁設計】探討黑暗模式的優缺點,配色如何使用?
7. 【個資外洩怎麼辦?】身為購物車的管理業主,你必須知道的三大資安知識!
8. 【如何選擇網站設計素材?】應該使用圖庫照片,還是請攝影商來拍照?
報價洽詢