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地圖無法在模式窗口中正確呈現

回答

相關問題