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

Question

所以我正在為一個最終項目（高中）制作這個網站，並且我正在使用

    <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：對不起，我的英語。 正如您通過查看我的代碼可能已經注意到的，這不是我的母語

Answer 1

與其使用加載，不如不使用燈箱內部的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>

使用.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