谷歌地圖沒有填寫模態彈出窗口

Question

當用戶在此處單擊此頁面上的地圖時，我正在使用模態彈出窗口，這會顯示帶有路線的更大地圖。

然而地圖並沒有填滿整個空間，我無法弄清楚原因。 當我右鍵單擊它以檢查chrome檢查器時，它會使地圖​​填充模態。

請原諒所有代碼，但我認為最好將其全部包括在內：

       <div class="map clearfix">
            <div class="bg left-contact">
            <% if len(""&rsAdvert("ContactPostcode"))>0 then %>
                      <a href="#myModal" role="button" data-toggle="modal">
<div class="small-map" style="width:100%;height:130px;background:url(http://maps.google.com/maps/api/staticmap?center=<%=server.URLEncode(""&rsAdvert("ContactPostcode"))%>&zoom=14&size=250x250&maptype=roadmap&markers=color:ORANGE|label:A|<%=server.URLEncode(""&rsAdvert("ContactPostcode"))%>&sensor=false) center no-repeat;"></div></a>
                      <div class="expand"></div>
    <!-- Modal -->
    <div id="myModal" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
        <h3 id="myModalLabel">Modal header</h3>
      </div>
      <div class="modal-body">
        <p><div id='map-canvas'></div></p>
      </div>
      <div class="modal-footer">
        <button class="btn" data-dismiss="modal" aria-hidden="true">Close</button>
        <button class="btn btn-primary">Save changes</button>
      </div>
    </div>
        <script src="http://code.jquery.com/jquery.js"></script>
        <script src="/js/bootstrap/js/bootstrap.min.js"></script>
               <% end if %> 
            </div>
        </div>

     <script src="http://maps.googleapis.com/maps/api/js?q=London&key=AIzaSyBaPEDyFbbnWjtvT8W3UBOM34Y7g6vK69A&sensor=false"></script>
    <script>
        var map;
        function initialize() {
          var mapOptions = {
            zoom: 15,
            center: new google.maps.LatLng(-34.397, 150.644),
            mapTypeId: google.maps.MapTypeId.ROADMAP
          };
          var geolocate = function(address, callback) {
                $.ajax({
                        url: "http://maps.googleapis.com/maps/api/geocode/json",
                        data: {
                            "sensor": true,
                            "address": address
                        },
                        dataType: "json",
                        success: function(d) {
                            if (d.status == "ZERO_RESULTS") callback(false);
                            if (d.results && d.results[0] && d.results[0].geometry) {
                                callback({
                                    "ne": d.results[0].geometry.bounds.northeast,
                                    "sw": d.results[0].geometry.bounds.southwest,
                                    "center": d.results[0].geometry.location
                                });
                            }
                            else callback(false);
                        }
                    });
          };
          map = new google.maps.Map(document.getElementById('map-canvas'),
              mapOptions);
          geolocate("<%=server.URLEncode(""&rs("ca_postcode"))%>", function(c) {
                map.setCenter(new google.maps.LatLng(c.center.lat, c.center.lng));
         });
        }
        google.maps.event.addDomListener(window, 'load', initialize);
    </script>

謝謝。

Answer 1

為了完整性：如果您使用的是Bootstrap模態窗口 ，則需要使用shown.bs.modal事件代替shown事件。

這里的代碼：

  $("#modalWindowId").on("shown.bs.modal", function(e) {
    google.maps.event.trigger(map, "resize");
    map.setCenter(markerLatLng); // Set here center map coordinates
  });

看看這里了解更多信息： http ： //coderpills.wordpress.com/2014/06/02/showing-google-map-inside-a-bootstrap-modal-window/

Answer 2

在模式啟動后，您可以在地圖上觸發resize事件，這將使其調整大小以適合包含div的尺寸。 從文檔 ：

當div改變大小時，開發人員應該在地圖上觸發此事件

// Add this at the bottom of the script which defines your map
// It will trigger the resize event on the map after the modal has launched
$('#myModal').on('shown', function () {
  google.maps.event.trigger(map, 'resize');
})

我認為當你啟動dev工具時， window.onResize事件會導致在地圖上觸發resize事件。 您可以通過在單擊模式之前從瀏覽器窗口中分離開發工具來證明這一點。

Answer 3

試着用這個

填充：0;

CSS：

.modal-body {
max-height: 400px;
overflow-y: auto;
padding: 0;
position: relative;
     }

Answer 4

謝謝你的回答。 只是為了幫助其他可能有這個問題的人，除了由於將地圖放在模態中而不得不調整大小，我還必須重置中心。

以下代碼需要在initialize函數中添加。

    $('#show_map').on('shown', function () {
        google.maps.event.trigger(map, "resize");
        map.setCenter(myLatlng);
    });

Answer 5

$('#Map_Modal_ID').on('shown.bs.modal', function () {
    initialize();
});