谷歌地圖嵌入 API “Firefox 無法打開此頁面”

Question

我正在嘗試使用 Google Maps Embed API 將 Google Maps map 嵌入到網頁中。

據我所知，我必須按照 Google 的以下教程在 Cloud Console 中設置一個項目，以及一個 API 密鑰：

https://developers.google.com/maps/documentation/embed/cloud-setup

https://developers.google.com/maps/documentation/embed/get-api-key

在此之后，我嘗試使用以下命令將 IFrame 添加到頁面：

<iframe
  width="450"
  height="250"
  frameborder="0" style="border:0"
  src="https://www.google.com/maps/embed/v1/place?key=YOUR_API_KEY&q=Test" allowfullscreen>
</iframe>

將YOUR_API_KEY替換為在上述步驟中創建的 API 密鑰。

不幸的是，當在 Firefox 中打開時，IFrame 顯示一條消息說

---

Firefox 無法顯示此頁面

為了保護您的安全， www.google.com將不允許 Firefox 在其他站點嵌入該頁面時顯示該頁面。 要查看此頁面，您需要在新的 window 中打開它。

---

對於調試，我的第一個想法是檢查開發者工具控制台。 果然有一個404錯誤： GET https://www.google.com/maps/embed/v1/MAP_MODE?key=YOUR_API_KEY&PARAMETERS

現在，我收集到瀏覽器正在嘗試獲取上述地址並且什么也沒收到，但是，我不確定這個地址來自哪里，因為它不是我在 IFrame 的 src 屬性中提供的。 我相信這是導致問題的原因，但是，我不知道從哪里開始解決它。

任何建議將不勝感激。

---

編輯

這很可能是緩存問題。 關閉頁面並重新打開后，map 顯示正確。

我將把這個問題留在這里，以防其他人有同樣的問題。

Answer 1

我正在嘗試使用 Google Maps Embed API 將 Google Maps map 嵌入到網頁中。

據我所知，我必須按照 Google 的以下教程在 Cloud Console 中設置一個項目，以及一個 API 密鑰：

https://developers.google.com/maps/documentation/embed/cloud-setup

https://developers.google.com/maps/documentation/embed/get-api-key

在此之后，我嘗試使用以下命令將 IFrame 添加到頁面：

<iframe
  width="450"
  height="250"
  frameborder="0" style="border:0"
  src="https://www.google.com/maps/embed/v1/place?key=YOUR_API_KEY&q=Test" allowfullscreen>
</iframe>

將YOUR_API_KEY替換為在上述步驟中創建的 API 密鑰。

不幸的是，當在 Firefox 中打開時，IFrame 顯示一條消息說

---

Firefox 無法顯示此頁面

為了保護您的安全， www.google.com將不允許 Firefox 在其他站點嵌入該頁面時顯示該頁面。 要查看此頁面，您需要在新的 window 中打開它。

---

對於調試，我的第一個想法是檢查開發者工具控制台。 果然有一個404錯誤： GET https://www.google.com/maps/embed/v1/MAP_MODE?key=YOUR_API_KEY&PARAMETERS

現在，我收集到瀏覽器正在嘗試獲取上述地址並且什么也沒收到，但是，我不確定這個地址來自哪里，因為它不是我在 IFrame 的 src 屬性中提供的。 我相信這是導致問題的原因，但是，我不知道從哪里開始解決它。

任何建議將不勝感激。

---

編輯

這很可能是緩存問題。 關閉頁面並重新打開后，map 顯示正確。

我將把這個問題留在這里，以防其他人有同樣的問題。