iframe無法加載谷歌地圖

Question

我遇到了一個奇怪的問題，我不知道問題是什麼。下面的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); 
}); 

的地圖是永遠不會加載，並且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 demo。

Answer 1

將&output=embed附加到URL的末尾可修復問題。

Answer 2

請確保您啓用谷歌地圖嵌入api除了地方的API。

生成你從這裏映射：

https://developers.google.com/maps/documentation/embed/start

Answer 3

截至2014年，該選項&output=embed不工作了。 Google建議您切換到Google Maps Embed API。這是一個Quick Start。

基本上，新的IFRAME鏈接：

https://www.google.com/maps/embed/v1/place?key={BROWSER_KEY}&q={YOUR_ADDRESS_ENCODED} 

記住，使谷歌地圖API嵌入在 API控制檯。

p.s.此刻檢查工作我寫這個答案