Google地图未填充模态弹出式窗口 [英] Google map not filling modal popup

问题描述

我在使用模式弹出式窗口时，用户点击地图

I'm using a modal popup when users click the map on this page here, which brings up a larger map with directions.

地图不填满整个空间然而，我不知道为什么。当我右键点击它检查一个chrome检查器，它使地图填充模态。

The map isn't filling the entire space however and I can't figure out why. When I right click on it to check in an the chrome inspector, it makes the map fill the modal.

使用所有代码，但我认为最好全部包含：

Excuse all the code, but I thought it best to include it all:

       <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>

谢谢。

推荐答案

在模式启动后，您可以在地图上触发 resize 事件，这将导致它调整大小以适合包含 div 。从文档：

You can trigger a resize event on the map, after the modal is launched, which will cause it to resize to fit the dimensions of the containing div. From the documentation:

当div更改
时，开发人员应在地图上触发此事件

Developers should trigger this event on the map when the div changes size

// 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');
})

我认为当你启动开发工具时， window.onResize c $ c> resize 事件在地图上触发。你可以通过在点击模态之前从浏览器窗口分离开发工具来证明这一点。

I think when you launch dev tools the window.onResize event is causing the resize event to be triggered on the map. You can prove this by detaching dev tools from the browser window before clicking your modal.

这篇关于Google地图未填充模态弹出式窗口的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！