我尝试或不适用的一些事情：

Question

我正在尝试设置一个系统，Google地图会在弹出的iframe [使用Fancybox]中显示，我已阅读a lot of similar topics on Stack Overflow我有已经实施了许多建议而没有成功。

问题是：

未捕获的ReferenceError：谷歌未定义

加载iframe时。 iframe正确加载其数据（这可以在浏览器控制台上查看），但谷歌地图无法实现，控制台错误（上图）表示无法初始化。

我尝试或不适用的一些事情：

我设置了回调函数
我使用的是Javascript Map API，而不是v3版本。
我尝试了async和defer但没有成功。
我不希望地图成为iframe（嵌入式Google地图）的唯一内容。
我尝试过使用窗口加载javascript事件检测器但没有成功（来自另一个问题）。
问题不在于iframe本身 - 它有效 - 它是框架与其父框架之间的关系。

令人讨厌的是，这个弹出式地图系统在经过一个小时的试验和错误后工作得很好，然后我清除了我的浏览器历史记录（或做了其他的事情）现在意味着问题已经恢复并且不会消失。< / p>

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调用）且工作正常。

我知道这听起来像是其他谷歌地图问题的 de ja vu ，但我所见过的却无法解决这个问题。

Answer 1

控制台中的原始问题通知是：

未捕获的ReferenceError：谷歌未定义

即使地图成功加载，也会显示此通知。

地图无法正确加载/显示的原因是 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;
}

Iframe窗口中的Google Maps API问题

我尝试或不适用的一些事情：

进一步详情：

1 个答案:

解决方案：