在调整网页大小之前，嵌入谷歌地图显示错误

Question

我正在尝试在我的网页中显示地图以从中获取坐标。它工作正常，我可以拖放一个标记并在输入框中获取坐标。

但是当我加载网页时，我的问题就来了。除了地图，一切都显示得很好，在这里你可以看到地图是如何显示的：

但是如果此时我调整网页的大小，我的意思是，如果它是全屏的，就把它放一半。或者如果它只是屏幕的一部分，就让它变得更大或更小。然后，您将看到正确的地图：

（这不是同一个地方，我知道。我从 2 次重新加载中获取了图像）

我用 HTML 创建网页，但我称它为不同的网页。当你加载索引时，你会得到一个带有这个的按钮

href:<a href="#openMap">

而且，显示的部分将是：

<div data-role="page"  id="openMap" data-theme="e">
<div data-role="header" data-id="fixedNav" data-position="fixed">
    blablabla
    <div data-role="content">
        <form action="">
            <div id="map_canvas" style="width:500px; height:300px"></div>
            blablabla

还有所有的 div、表格……都已正确关闭。我有很多输入框和字段我没有放在这里。

然后，在我的谷歌地图脚本中，我有这个：

var map;
function initializeNewMap() {
  var myLatlng = new google.maps.LatLng(43.462119485,-3.809954692009);

  var myOptions = {
     zoom: 14,
     center: myLatlng,
     mapTypeId: google.maps.MapTypeId.ROADMAP
  }
  map = new google.maps.Map(document.getElementById("map_canvas"), myOptions); 

  var marker = new google.maps.Marker({
      draggable: true,
      position: myLatlng, 
      map: map,
      title: "Your location"
  });

}

但我不知道为什么需要调整大小。有办法解决吗？

编辑：我添加更多信息：

我这样称呼有地图的网页部分：

$(document).on("pageinit", '#openMap', function() {

我试着放了

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

就在它之后，但什么也没发生。

解决方案：

我在其他问题中找到了解决方案（Google Maps v3 load partially on top left corner, resize event does not work，Ian Devlin 帖子）：

正如一位用户所说，我需要调整地图大小。但只是那条线不起作用。我在初始化函数的末尾添加了这段代码：

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

所以它只是在地图显示后调用。

Answer 1

我也遇到过这个问题，我通过触发谷歌地图resize事件解决了。

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

更新：

var map;
function initializeNewMap() {
 // add your code
  map = new google.maps.Map(document.getElementById("map_canvas"), myOptions); 
  google.maps.event.trigger(map, 'resize');
}

希望你能理解。

Answer 2

我遇到了类似的问题，但您看不到任何地图（整个框都是灰色的）。

为我解决的问题是意识到包含地图的 div 一开始是使用隐藏的

display:none;

如果你改用

visibility:hidden;

div 保持其大小，但仍显示为隐藏，因此初始化时地图使用正确的高度和宽度，而不是 0 值

希望这会有所帮助！

Answer 3

如果您使用基于 JavaScript 的布局助手（例如 Foundation Equalizer），您需要在加载地图之前确保地图容器具有确定的大小，这样您就不会得到臭名昭著的灰色地图和某些属性，如 @ 987654322@ 按预期工作，或使用第三方插件的事件触发自定义回调，修复地图。例如：

var map = new google.maps.Map(/*...*/);
$(document).on("after-height-change.fndtn.equalizer", function(){
    google.maps.event.trigger(map, 'resize');
});

Answer 4

我的地图隐藏在 Twitter Bootstrap tab 中，因此在地图初始化时不可见，因此我需要在选择选项卡时调用 resize，如下所示：

$('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {                 
    google.maps.event.trigger(map, 'resize');
})

Answer 5

应该如何解决：

您必须在容器（放置地图的位置）可见后初始化地图，

请记住，加载和可见性不同，您需要可见性。

就像，我有很多标签，最后一个标签包含地图， 我通过以下方式解决了这个问题：

$('#map-tab').click(function() {
    // init map
});

在这里，我首先确保容器可见（因为单击该元素会显示包含地图的部分）然后初始化地图

这对我来说很好用；