一、Google 地圖不正常顯示?與 Maps JavaScript API 服務有關
Google Maps API 是使用 WordPress 外掛建置 Google 地圖時必須要申請的 Google 服務項目之一,同時這也是造成網站之中 Google 地圖無法正確顯示的原因,其來自於 2018年5月3日 在 Google Clound 所發表的新聞 Introducing Google Maps Platform 中有談到,從 2018年6月11日起,您需要有效的 API 密鑰,並且在 Google Cloud Platform 帳戶啟用帳單結算功能,才能保證網站調用 Maps JavaScript API 次數,讓 Google 地圖正常運作,因此只要沒有完成帳單中信用卡資訊輸入,網站地圖都會顯示如下圖一樣的錯誤。
延伸閱讀:Google地圖無法顯示,出現浮水印? 申請 API 帳單資料流程教學

那麼除了在 Google Cloud Platform 加入帳單付費功能,還有怎樣的方式可以避免 Google 地圖出現無法載入的情形呢?其實只要將網站 Google 地圖製作方式做更改即可,也就是說不要使用必須呼叫 Google API 金鑰的方式 ( 比如以 WordPress 外掛製作 Google 地圖 ),而是改用直接從 Google 地圖服務 中複製下來的嵌入程式碼在網頁上以 HTML iframe 元素方式嵌入網頁,如此就無需再擔心地圖帳單與付費的問題,但同時 Google 地圖的外觀也就只能夠是單一樣式,比較難以自訂外觀及功能。
延伸閱讀: Google Map 教學 – 網站嵌入 Google 地圖及我的地圖操作方法
二、解析 Google Maps API 收費規則
如果說希望網站的 Google 地圖可以具有與眾不同的特色,並且與網站主題具有一致性,那麼就必須要在 Goolge Clound Platform 中開啟帳單功能,Goolge 也不是一開啟帳單付款方式,就開始向使用者收費,而是在開啟後會有 200 美金的額度,一但超過此額度後,就會通知帳戶持有者是否要付費繼續使用,而根據 Google Maps Platform 中所提到的對大多數的使用者而言,通常都不會超過此額度。 下方是此次 Google 地圖改版後的收費與定價方式,可以看到動態地圖的項目,每月 200 美金的額度可以提供最多 28000 次的地圖載入,如果您有在使用 Google Analytics(GA ) 紀錄網站流量狀況,就可以大致估算出每個月會不會超過 28000 的地圖載入次數,也可以使用像 hotjar 這一類提供單一網頁分析使用者造訪次數的工具來了解具有 Google 地圖得網頁平均所使用的次數。

圖片來源:Google 地圖、路線和地點的定價
延伸閱讀: Hotjar 教學 – 註冊流程及設定教學,分析網站使用熱點與瀏覽方式
Google Maps API常見問題
Google Maps API 每個月免費額度是多少?
Google 每月提供 200 美元的免費使用額度,折合 Maps JavaScript API 約 28,000 次地圖載入(每 1,000 次 0.007 美元)。對一般企業網站而言,每月 28,000 次地圖載入已相當充裕,大多數中小企業網站不會超過此限制。只有流量極高或使用進階 API 功能的網站,才需要實際付費。
我的網站嵌入 Google 地圖需要付費嗎?
需要申請 API 金鑰並綁定信用卡,但不一定會實際扣款。Google 要求所有 Maps API 使用都必須綁定付款資訊,但每月 200 美元的免費額度對大多數小型企業網站已足夠使用,不會產生費用。若超過免費額度,才會按使用量計費。
網站上的 Google 地圖顯示「此頁面無法正確載入 Google 地圖」怎麼辦?
常見原因有三:①API 金鑰未設定或已失效;②API 金鑰未開啟 Maps JavaScript API 服務;③API 金鑰有網域限制但設定錯誤。排除步驟:進入 Google Cloud Console → 確認 API 金鑰有效 → 確認已啟用 Maps JavaScript API → 確認網域白名單包含你的網站網域。
如何申請 Google Maps API 金鑰?
步驟:①前往 Google Cloud Console(console.cloud.google.com);②建立或選擇一個專案;③在「API 和服務」中啟用「Maps JavaScript API」;④在「憑證」頁面建立 API 金鑰;⑤設定應用程式限制(建議限定你的網站網域,防止金鑰被盜用);⑥在網站的 Google 地圖嵌入碼中加入 &key=YOUR_API_KEY。
有沒有替代 Google Maps 的免費地圖方案?
有幾個選擇:①OpenStreetMap(完全免費開源,可使用 Leaflet.js 嵌入);②Mapbox(有免費方案,每月 50,000 次載入免費);③Bing Maps(有免費額度,適合 Microsoft 生態系用戶)。對於只需顯示公司地址的簡單用途,可考慮直接嵌入 Google 地圖的 iframe(不需 API 金鑰,但功能受限)。
三、結語
Google Maps API 也有一些方法可以減少地圖載入次數(比如建立快取),可以有效減少地圖重新調用 API 金鑰的次數,如果您還有 Google 地圖相關問題或者其他網站設計的疑問想要諮詢,都歡迎透過即時通訊或聯絡表單與鵠崙設計聯繫!