载入后如何使用JavaScript调整Google Map的大小？

105

我将“ mapwrap” div设置为400px x 400px，在其中，我将Google“地图”设置为100％x 100％。因此，地图加载为400 x 400像素，然后使用JavaScript将“ mapwrap”的大小调整为屏幕的100％x 100％-google地图按照我的预期将大小调整为整个屏幕，但图块在其右边缘之前开始消失页。

我可以调用一个简单的函数来使Google地图重新调整为较大尺寸的“ mapwrap” div吗？

javascript css google-maps

— 马修·詹姆斯·泰勒（Matthew James Taylor）
source

28

如果您使用的是Google Maps v2，请checkResize()在调整容器大小后调用地图。链接

更新

Google Maps JavaScript API v2已于2011年弃用。它不再可用。

— 单负消除
source

323

对于Google Maps v3，您需要以其他方式触发resize事件：

google.maps.event.trigger(map, "resize");

请参阅有关调整大小事件的文档（您需要搜索单词“调整大小”）：http : //code.google.com/apis/maps/documentation/v3/reference.html#event

更新资料

这个答案已经存在很长时间了，因此，进行一些演示可能是值得的＆尽管它使用jQuery，但实际上并不需要这样做。

$(function() {
  var mapOptions = {
    zoom: 8,
    center: new google.maps.LatLng(-34.397, 150.644)
  };
  var map = new google.maps.Map($("#map-canvas")[0], mapOptions);

  // listen for the window resize event & trigger Google Maps to update too
  $(window).resize(function() {
    // (the 'map' here is the result of the created 'var map = ...' above)
    google.maps.event.trigger(map, "resize");
  });
});

html,
body {
  height: 100%;
}
#map-canvas {
  min-width: 200px;
  width: 50%;
  min-height: 200px;
  height: 80%;
  border: 1px solid blue;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&dummy=.js"></script>
Google Maps resize demo
<div id="map-canvas"></div>

展开摘要

更新2018-05-22

随着Maps JavaScript API版本3.32中新的渲染器版本的发布，resize事件不再是Map类的一部分。

文档说明

调整地图大小后，地图中心将固定

全屏控件现在保留中心。

不再需要手动触发调整大小事件。

来源：https：//developers.google.com/maps/documentation/javascript/new-renderer

google.maps.event.trigger(map, "resize"); 从版本3.32起没有任何作用

— 科罗马尼戈
source

2

对于使用goMap的任何人，请记住，可以在$ .goMap.map上找到google map对象-Adam Caviness

— 2012年

1

请参见Andrew Hedges的以下答案，以了解实现方式：

— CrazyTim 2012年

调用此映射后，该映射不会调整大小，直到我用setTimeout包装它为止。我在这里找到了解决方案（请参阅注释46）。

— 泰勒·科利尔

考虑到现在不推荐使用v2，应选择此答案。@Tyler Collier此事件触发器将通知地图它必须重新绘制自身。您可能正在调整隐藏容器的大小，在这种情况下，是的，缩小和放大将在超时时起作用。

— Schien

8

流行的答案google.maps.event.trigger(map, "resize");并不适合我一个人。

这是一个确保页面已加载以及地图也已加载的技巧。通过设置侦听器并侦听映射的空闲状态，您可以调用事件触发器以调整大小。

$(document).ready(function() {
    google.maps.event.addListener(map, "idle", function(){
        google.maps.event.trigger(map, 'resize'); 
    });
});

这是对我有用的答案。

— 意大利苏打
source

2

沃尔夫冈·皮克勒（Wolfgang Pichler）的盒装地图可以提供

将地图加载到可拖动且可调整大小的div元素中。

— 吉勒斯“别再邪恶了”
source

1

看起来这是针对v2地图的。原始海报询问的是v3地图。这两个API似乎不兼容。

— 2011年

该链接会触发检测到的威胁。

— intotecho '19

1

最好将其完成。它将重新调整地图的大小。无需再检查元素即可调整地图大小。它将自动触发re-size事件。

    google.maps.event.addListener(map, "idle", function()
        {
            google.maps.event.trigger(map, 'resize');
        });

        map_array[Next].setZoom( map.getZoom() - 1 );
    map_array[Next].setZoom( map.getZoom() + 1 );

— Divyanshu Rawat
source

0

首先，感谢您指导我并解决此问题。我从您的讨论中找到了解决此问题的方法。是的，让我们说清楚。事情是我在CakePHP3中使用GoogleMapHelper v3帮助程序。当我尝试打开引导模式弹出窗口时，我被地图上的灰色框问题惊呆了。已延长2天。终于我得到了解决。

我们需要更新GoogleMapHelper来解决此问题

需要在setCenterMap函数中添加以下脚本

google.maps.event.trigger({$id}, \"resize\");

并需要在JavaScript中包含以下代码

google.maps.event.addListenerOnce({$id}, 'idle', function(){
   setCenterMap(new google.maps.LatLng({$this->defaultLatitude}, 
   {$this->defaultLongitude}));
});

— 用户1933951
source