Google地图无法在模式窗口中正确呈现

我在加载模式窗口内的谷歌地图时遇到问题。基本上，当模式窗口打开时，我加载地图，但它不完全呈现。Google地图无法在模式窗口中正确呈现

我加入了一个例子，以便您更好地理解问题。有人知道如何解决这个问题吗？

<html> 

<head> 
    <script src="http://code.jquery.com/jquery.min.js"></script> 
    <script src="http://www.jacklmoore.com/colorbox/colorbox/jquery.colorbox.js"></script> 
    <script> 
     $(document).ready(function(){ 
      $("#link").colorbox({ 
       inline:true, 
       width:"50%", 
       onOpen: function(){ 
        $('#cboxClose').remove(); 
        var script = document.createElement("script"); 
         script.type = "text/javascript"; 
         script.src = "https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false&callback=showMapsStep1"; 
         document.body.appendChild(script); 
       } 
      }); 


      window.showMapsStep1 = function(){ 


       var mapOptions = { 
        zoom: 8, 
        center: new google.maps.LatLng(-34.397, 150.644), 
        mapTypeId: google.maps.MapTypeId.ROADMAP 
       } 
       var map = new google.maps.Map(document.getElementById("canvas"), mapOptions); 

       $('#canvas').show(); 
      } 
     }); 
    </script> 
</head> 

<body> 
    <a href="#box" id="link">Open modal <a/> 

    <div style='display:none'> 
     <div id='box' style='height: 300px; width: 500px;' > 
      <div id="canvas" style="height: 100%; width: 100%;"></div> 
     </div> 
    </div> 
</body> 

</html>

编辑：这是在谷歌浏览器上测试的。如果我调整窗口大小，地图呈现正确

来源

2012-12-28 Trino00

我有谷歌地图的问题，如果高度和宽度未设置为像素值。尝试，因为你只是使用100％反正 –

你有一个工作的例子也尝试缩放：1，并看看这将工作后，你可以再次尝试放大一些 – Ivo

@NuclearGhost在我的代码（不是这个例如）我定义的像素高度和宽度，并没有解决问题 – Trino00

您必须触发'调整大小'地图事件。

var map = new google.maps.Map(document.getElementById("canvas"), mapOptions); 

google.maps.event.trigger(map, 'resize', function() { 
    // your callback content 
});

来源

2014-11-10 21:21:05 Ekow

Google地图无法在模式窗口中正确呈现

回答

相关问题