谷歌地图没有正确调整大小答案

【问题标题】：Google Map Is Not Resizing Properly谷歌地图没有正确调整大小
【发布时间】：2013-09-23 07:29:30
【问题描述】：

我正在开发一个应用程序，其中包含google maps。 script如下。

<script>https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false</script>
<script>
   $(function() {
     var map;

     function initialize() {

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

        google.maps.event.addDomListener(window, 'load', initialize);
        google.maps.event.trigger(map, "resize");

     });

</script>

div 是

它没有正确调整大小，但是一旦您单击检查元素，它就会调整大小。请帮我找出解决方案。工作更受赞赏

【问题讨论】：

你想用 resize 做什么？
它不会根据 div 的大小调整大小。所以有人建议我加入 google.maps.event.trigger(map, "resize");。但它仍然无法正常工作。

标签： jquery google-maps google-maps-api-3 google-maps-markers

【解决方案1】：

在这一行

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

你不需要'var'。

包含 jquery 吗？

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>

试试这个方法

<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script>

【讨论】：

这听起来有问题，当标签点击（打开）你应该调用 map.checkResize() ，当你初始化 gmap 时标签是不可见的，我认为它的大小不正确
其实 google.maps.event.trigger(map, 'resize');不错，tab可见后调用

【解决方案2】：

<script src ="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script>
<script src ="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>


<script>
$(document).ready(function(){
var map;
var mapOptions = {
      zoom: 8,
      center: new google.maps.LatLng(13.004558, 77.6017),
      mapTypeId: google.maps.MapTypeId.ROADMAP
};

map = new google.maps.Map(
        document.getElementById('map-canvas'),
       mapOptions);

$("#map-canvas").css("height", "120px");
google.maps.event.trigger(map, "resize");
});

</script>
<div id = "map-canvas"></div>

【讨论】：

这应该可以，请注意，您必须设置要在其中渲染地图的 div 的高度和宽度，然后应该调用调整大小函数