iframe 內的谷歌地圖未加載
[英]Google Maps inside iframe not loading
問題描述
我遇到了一個奇怪的問題，我不知道問題是什么。 以下 jQuery 代碼是我想要實現的簡化版本：
var iframe = $('<iframe />');
iframe.prop('src', 'https://maps.google.com/maps?q=London&hl=en&sll=37.0625,-95.677068&sspn=46.677964,93.076172&t=h&hnear=London,+United+Kingdom&z=10');
iframe.appendTo($('body'));
// When the iframe loads:
iframe.load(function() {
alert(1);
});
map 永遠不會被加載，並且load()事件永遠不會被觸發。 Chrome 報告以下錯誤：
Refused to display 'https://maps.google.com/maps?q=London&hl=en&sll=37.0625,-95.677068&sspn=46.677964,93.076172&t=h&hnear=London,+United+Kingdom&z=10' in a frame because it set 'X-Frame-Options' to 'SAMEORIGIN'.
如何繞過這一點？
這是一個jsFiddle 演示。
5 個解決方案
解決方案1
51 已采納 2013-03-13 15:14:21
將&output=embed附加到 URL 的末尾可以解決問題。
更新：谷歌禁用了此功能，該功能在最初發布答案時有效。 此解決方案不再有效。
解決方案2
21 2015-07-28 02:57:35
自 2014 年起，選項&output=embed不再起作用。 Google 建議您切換到 Google Maps Embed API。 這是一個快速入門。
基本上，新的 iframe 鏈接是：
https://www.google.com/maps/embed/v1/place?key={BROWSER_KEY}&q={YOUR_ADDRESS_ENCODED}
請記住在 API 控制台中啟用Google Maps Embed API 。
ps 在我寫這個答案時檢查了工作
解決方案3
17 2014-12-28 15:27:22
確保除了地點 API 之外還啟用了 google maps embed api。
從這里生成地圖：
https://developers.google.com/maps/documentation/embed/start
解決方案4
0 2022-03-18 21:42:32
I've run this:
<head>
<title>Top Secret Route</title>
</head>
<div>
<div>
<embed width="1000px" height="1000px" frameborder="3px" style="border: 0px" src="https://www.google.com/maps/embed/directions?Moscow&destination=StBasil,Moscow&key=API-KEY">
<button onclick="<embed>" ondbclick="<div>">embed</button>
</embed>
</div>
</html>
但它拒絕連接即使我將它放入 CodePen 也拒絕連接
解決方案5
0 2022-08-28 14:18:00
我今天遇到了這個問題，發現它是一個單一的 chrome 擴展，它阻止了 map 為我加載。
我的解決方案是禁用所有擴展，然后逐一啟用它們以查看是哪個（如果有）導致了問題。
您可以在此處找到您的 chrome 擴展：chrome://extensions/
在“ src”上使用javascript變量時未加載Google Maps iFrame
[英]Google Maps iFrame not loading when using javascript variables on “src”
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.