有些事情我已經試過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>&region=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.

來源

2017-08-02 Martin

在控制檯中，由原發證通知是：

Uncaught ReferenceError: google is not defined

這個通知出現反正即使地圖加載成功。

地圖不能正確加載/顯示的原因是CSS;我已將#map_canvas元素的CSS設置爲width/height值的%，而不是絕對像素尺寸。

解決方法：

雖然%尺寸不工作，你可以使用視口高度和視口寬度值（vh，vw），並在地圖佔據了在iframe這個空間。

#map_canvas { 
    width: 80vw; /* rather than % dimensions */ 
    height: 70vh; 
    margin:1rem auto; 
    box-sizing: border-box; 
}

來源

2017-08-02 18:28:41 Martin

Iframe窗口中的Google Maps API問題

有些事情我已經試過AREADY或不適用的：

進一步瞭解詳細：

回答

解決方法：

相關問題