[英]Inserting Google Map in Lightbox after using .load()
所以我正在为一个最终项目(高中)制作这个网站,并且我正在使用
<script>
function carregaPagina($link){
$( "#destaques" ).load( $link );
}
</script>
将页面加载到div中,以便每次您单击菜单上的链接时都不会刷新整个页面。HTML如下所示:
<li>
<a href="#" onClick="carregaPagina('contactos.php');">CONTACTOS</a>
</li>
(只是一个例子)。
现在,我想在灯箱内的通讯录页面上插入Google地图,以便显示地址,如果用户愿意,可以单击以查看地图。 我已使用本教程来获取地图。 我试图将它放在这样的联系人页面中
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="estilo.css">
<script src="https://maps.googleapis.com/maps/api/js"></script>
<script>
function initialize() {
var mapCanvas = document.getElementById('map-canvas');
var mapOptions = {
center: new google.maps.LatLng(44.5403, -78.5463),
zoom: 8,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
var map = new google.maps.Map(mapCanvas, mapOptions)
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
<body>
<div id="map-canvas"></div>
</body>
</html>
如果我单独加载页面,但如果使用代码加载页面,或者将其放在灯箱内部,则无法运行,如下所示:
<body>
<p>This is the main content. To display a lightbox click <a href = "javascript:void(0)" onclick = "document.getElementById('light').style.display='block';document.getElementById('fade').style.display='block'">here</a></p>
<div id="light" class="white_content"><div id="map-canvas"></div> <a href = "javascript:void(0)" onclick = "document.getElementById('light').style.display='none';document.getElementById('fade').style.display='none'">Close</a></div>
<div id="fade" class="black_overlay"></div>
</body>
我在Stackoverflow中找到了灯箱。 谁能帮帮我吗?
PS:对不起,我的英语。 正如您通过查看我的代码可能已经注意到的,这不是我的母语
与其使用加载,不如不使用灯箱内部的iframe,而是在其中加载包含全幅地图的页面
样品:
<div id="light" class="white_content">
<iframe height="300" width="300" src="map_page.php"></iframe>
<a href = "javascript:void(0)" onclick = "document.getElementById('light').style.display='none';document.getElementById('fade').style.display='none'">Close</a></div>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.