使用.load(）后在Lightbox中插入谷歌地图

Inserting Google Map in Lightbox after using .load()

本文关键字：插入 谷歌地图 Lightbox 后在 load 使用      更新时间：2023-09-26

所以我正在为期末项目（高中）制作这个网站，我正在使用

    <script>
        function carregaPagina($link){
            $( "#destaques" ).load( $link );
            }
    </script>

将页面加载到div中，这样每次单击菜单上的链接都不会刷新整个页面。HTML如下所示：

    <li>
       <a href="#" onClick="carregaPagina('contactos.php');">CONTACTOS</a>
    </li>

（只是一个例子）。

现在，我想在联系人页面上的灯箱中插入一个谷歌地图，这样它就会显示地址，如果用户愿意，可以点击查看地图。我用这个教程来获取地图。我试着把它放在联系人页面里，就像这个一样

    <!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的某个地方找到了灯箱。有人能帮我吗？

p.S.：对不起我的英语。通过查看我的代码，您可能已经注意到，它不是我的母语

与其使用加载，为什么不在灯箱中使用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>
相关文章：