我正在尝试设置一个系统，使谷歌地图出现在弹出式iframe中[使用Fancybox]，我已经阅读了很多关于Stack Overflow的类似主题，我已经实施了他们的许多建议，但没有成功。

问题是：

未

捕获的引用错误：未定义谷歌

加载 iframe 时。iframe 正确加载其数据(这可以在浏览器控制台上查看(，但 Google 地图无法显示，控制台错误(上图(表明它无法初始化。

我已经准备好尝试或不适用的一些事情：

我设置了一个回调函数
我使用的是Javascript Map API，而不是v3版本。
我尝试过async和defer都没有成功。
我不希望地图成为iframe(嵌入式谷歌地图(的唯一内容。
我尝试使用窗口加载 javascript 事件检测器但没有成功(来自另一个问题(。
问题不在于 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>

溶液：

虽然%尺寸不起作用，但您可以使用视口高度和视口宽度值(vh、vw(，地图会在 iframe 中占用此空间。

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

Iframe 窗口中的 Google 地图 API 问题

我已经准备好尝试或不适用的一些事情：

更多详情：

溶液：

相关内容

最新更新

热门标签：