我想設置一個Google Map在彈出式iframe [使用Fancybox]時出現的系統,我已閱讀a lotof similartopicson Stack Overflow並且我已經實施了很多他們的建議但沒有成功。Iframe窗口中的Google Maps API問題
的問題是:
Uncaught ReferenceError: google is not defined
當iframe中加載。 iframe正確加載其數據(並且可以在瀏覽器控制檯上查看),但Google地圖無法安裝,並且控制檯錯誤(以上)表示無法初始化。
有些事情我已經試過AREADY或不適用的:
- 我有一個回調函數設置
- 我使用一個Javascript API地圖,而不是
v3
版本。 - 我試過
async
和defer
都沒有成功。 - 我不希望地圖成爲iframe的唯一內容(嵌入谷歌地圖)。
- 我試過使用窗口加載JavaScript事件探測器沒有成功(從另一個問題)。
- 問題不在於iframe本身 - 它的工作原理 - 它是框架與其父代之間的關係。
煩人,這個彈出地圖系統的試驗和錯誤的一個小時後,工作得很好,然後我清理我的瀏覽器歷史記錄(或做別的東西),現在已經意味着返回的問題,並不會消失。
的iframe頁面:
<h1> Some Dynamic title </h1>
<div id="map_canvas"></div>
<div> Some other content </div>
<script type="text/javascript" async defer
src="https://maps.googleapis.com/maps/api/js?key=<mykey>®ion=GB&callback=initmap"></script>
<script type="text/javascript" >
/**
Imported idea from another Question on Stackoverflow (didn't work):
window.addEventListener('load',function(){
if(document.getElementById('map_canvas')){
initmap();
}
},false);
**/
var map;
function initmap() {
var myOptions = {
zoom: 11,
center: {lat: 5.345617, lng: 10.562},
mapTypeId: google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
var places=[];
var memnames=[];
var memid=[];
var teams=[];
var address=[];
<?php
print $mapOut; //data output to map markers.
?>
var infoWindow;
for(var i=0 ; i<places.length ; i++){
var iconBase = 'https://<?php print $_SERVER['SERVER_NAME'];?>/images/site/';
var marker=new google.maps.Marker({
position: places[i],
map: map,
title: memnames[i],
icon: iconBase + 'rugby-player-4.png'
});
(function(i,marker){
google.maps.event.addListener(marker, 'click', function(){
if(!infoWindow){
infoWindow = new google.maps.InfoWindow();
}
var content='<div class="mapInfo">'+
'<a href="/details.php?memid='+memid[i]+'">'+memnames[i]+'</a><strong>'+teams[i]+'</strong>'+address[i]+'</div>';
infoWindow.setContent(content);
infoWindow.open(map,marker);
});
})(i,marker);
}
}
/***
google.maps.event.addDomListener(window, 'load', initmap);
google.maps.event.addDomListener(window, "resize", function() {
var center = map.getCenter();
google.maps.event.trigger(map, "resize");
map.setCenter(center);
});
***/
</script>
進一步瞭解詳細:
直接訪問地圖頁面,我得到的迴應是,如果我加載谷歌地圖第一腳本;它告訴我,initmap is not a function
,然後如果我加載它第二(async/defer
)它告訴我,google is not defined
。
此地圖頁面的JavaScript代碼與其他網站上使用的代碼完全相同(不帶ajax/iframe調用)並且可正常工作。
I know this sounds like de ja vu of other Google map questions but the ones I've seen have not been able to resolve this issue.