使用.load（）后在Lightbox中插入Google Map

Question

So I am making this website for a final project (highschool) and I am using 所以我正在为一个最终项目（高中）制作这个网站，并且我正在使用

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

to load the pages into a div, so that everytime you click a link on the menu it doesn't refresh the entire page.HTML looks like this: 将页面加载到div中，以便每次您单击菜单上的链接时都不会刷新整个页面。HTML如下所示：

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

(just an example). （只是一个例子）。

Now I want to insert a google map on the contacts page, inside a lightbox, so it shows the address and the user can click to see the map if they wish to do so. 现在，我想在灯箱内的通讯录页面上插入Google地图，以便显示地址，如果用户愿意，可以单击以查看地图。 I've used this tutorial to get the map. 我已使用本教程来获取地图。 I've tried to put it just inside the contacts page like this 我试图将它放在这样的联系人页面中

    <!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>

which works if I load the page alone but not if I load it using the code , or if I put it inside of a lightbox, like this: 如果我单独加载页面，但如果使用代码加载页面，或者将其放在灯箱内部，则无法运行，如下所示：

<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>

I got the lightbox somewhere in Stackoverflow. 我在Stackoverflow中找到了灯箱。 Can anyone please help me? 谁能帮帮我吗？

PS: Sorry for my english. PS：对不起，我的英语。 As you may have noticed by looking at my code, it isn't my native language 正如您通过查看我的代码可能已经注意到的，这不是我的母语

Answer 1

Instead of using load, why not use iframe inside the lightbox instead where it will load a page that contains a full width map 与其使用加载，不如不使用灯箱内部的iframe，而是在其中加载包含全幅地图的页面

Sample: 样品：

<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>

使用.load（）后在Lightbox中插入Google Map

问题描述

1 个解决方案

解决方案1
0 已采纳 2015-04-07 10:40:17

使用.load（）后在Lightbox中插入Google Map

问题描述

1 个解决方案

解决方案1 0 已采纳 2015-04-07 10:40:17

解决方案1
0 已采纳 2015-04-07 10:40:17