Google 地图无法在 FancyBox（灯箱）内工作

发布于 2024-11-26 18:26:11 字数 1093 浏览 0 评论 0原文

如何在 Fancybox 灯箱内加载 Google 地图？当不在灯箱中时，地图加载正常。我只是使用他们网站上的标准谷歌地图代码：

 <html>
 <body>
   <div id="map_canvas" style="width:100px; height:100px;"></div>
 </body>

 <script type="text/javascript">
  function initialize() {
     var myLatlng = new google.maps.LatLng(-36.8804280598958,
 174.811848958333);
     var myOptions = {
         zoom: 13,
         center: myLatlng,
         mapTypeId: google.maps.MapTypeId.ROADMAP,
         panControl: false,
         zoomControl: false,
         scaleControl: true,
         mapTypeControl: false,
         scaleControl: false
     }
     var map = new
 google.maps.Map(document.getElementById("map_canvas"), myOptions); }

 function loadScript() {
     var script = document.createElement("script");
     script.type = "text/javascript";
     script.src =
 "http://maps.google.com/maps/api/js?sensor=false&callback=initialize";
     document.body.appendChild(script); }

 window.onload = loadScript;
 </script>
 </html>

原文

How do I get a Google Map to load inside the Fancybox lightbox? The map loads fine when not in the lightbox. I'm just using the standard Google maps code off their site:

 <html>
 <body>
   <div id="map_canvas" style="width:100px; height:100px;"></div>
 </body>

 <script type="text/javascript">
  function initialize() {
     var myLatlng = new google.maps.LatLng(-36.8804280598958,
 174.811848958333);
     var myOptions = {
         zoom: 13,
         center: myLatlng,
         mapTypeId: google.maps.MapTypeId.ROADMAP,
         panControl: false,
         zoomControl: false,
         scaleControl: true,
         mapTypeControl: false,
         scaleControl: false
     }
     var map = new
 google.maps.Map(document.getElementById("map_canvas"), myOptions); }

 function loadScript() {
     var script = document.createElement("script");
     script.type = "text/javascript";
     script.src =
 "http://maps.google.com/maps/api/js?sensor=false&callback=initialize";
     document.body.appendChild(script); }

 window.onload = loadScript;
 </script>
 </html>

分享到QQ

分享到微博