Html 嵌入谷歌地图显示错误，直到调整网页大小
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/19003291/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Embed google map is wrong displayed until resizing webpage
提问by Biribu
I am trying to display a map in my webpage to get coordinates from it. It works fine, I can drag and drop a marker and get coordinates in input boxes.
我正在尝试在我的网页中显示地图以从中获取坐标。它工作正常，我可以拖放标记并在输入框中获取坐标。
But my problem comes when I load the webpage. Everything is well displayed but the map, here you can see how the map is displayed:
但是当我加载网页时，我的问题就出现了。一切都显示得很好，但地图，在这里你可以看到地图是如何显示的：
But if in this moment I resize the webpage, I mean, if it was full screen, put it half. Or make it a little big bigger or smaller if it was just a part of the screen. Then, You will see the correct map:
但是，如果此时我调整网页大小，我的意思是，如果它是全屏的，则将其减半。或者，如果它只是屏幕的一部分，则将其放大或缩小一些。然后，您将看到正确的地图：
(It is not the same place, I know. I took the image from 2 reloads)
（这不是同一个地方，我知道。我从 2 次重新加载中获取了图像）
I create the webpage in HTML but I call it as if they were distinct webpages. When you load the index, you get a button with this
我用 HTML 创建了网页，但我称它为不同的网页。当你加载索引时，你会得到一个带有这个的按钮
href:<a href="#openMap">
And, the part showed will be:
而且，显示的部分将是：
<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
And all divs, forms... properly closed. I have many input boxes and fields which I haven't put them here.
和所有的 div，表单......正确关闭。我有很多输入框和字段，我没有把它们放在这里。
Then, in my google map script I have this:
然后，在我的谷歌地图脚本中，我有这个：
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"
});
}
But I have no idea why I need to resize. Is it a way to solve it?
但我不知道为什么我需要调整大小。有办法解决吗？
EDIT: I add more info:
编辑：我添加更多信息：
I call the part of the webpage which has the map this way:
我这样称呼有地图的网页部分：
$(document).on("pageinit", '#openMap', function() {
I tried to put
我试着把
google.maps.event.trigger(map, 'resize');
just after it but nothing happens.
就在它之后，但没有任何反应。
SOLUTION:
解决方案：
I found the solution in other question (Google Maps v3 load partially on top left corner, resize event does not work, Ian Devlin post):
我在其他问题中找到了解决方案（Google Maps v3 在左上角部分加载，调整大小事件不起作用，Ian Devlin 发布）：
As one user said here, I need to resize map. But just that line didn't work. I added this code at the end of the initialize function:
正如一位用户在这里所说，我需要调整地图大小。但只是那条线不起作用。我在初始化函数的末尾添加了这段代码：
google.maps.event.addListenerOnce(map, 'idle', function() {
google.maps.event.trigger(map, 'resize');
});
So it is just called after the map is shown.
所以它只是在显示地图后调用。
采纳答案by Praveen
I too faced this issue, I solved it by triggering the Google maps resizeevent.
我也遇到了这个问题，我通过触发谷歌地图resize事件解决了它。
google.maps.event.trigger(map, 'resize');
Updates:
更新：
var map;
function initializeNewMap() {
// add your code
map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
google.maps.event.trigger(map, 'resize');
}
Hope you understand.
希望你能理解。
回答by WongKongPhooey
I had a similar issue but you couldn't see any of the map (the entire box was grey).
我有一个类似的问题，但你看不到任何地图（整个框都是灰色的）。
What solved it for me was realising that the div that contained the map was starting off as hidden using
为我解决的是意识到包含地图的 div 开始隐藏使用
display:none;
If you instead use
如果您改为使用
visibility:hidden;
The div retains its size while still appears as hidden, so the map when initialised uses its correct height and width, rather than 0 values
div 保持其大小，同时仍显示为隐藏，因此初始化时的地图使用其正确的高度和宽度，而不是 0 值
Hope this helps!
希望这可以帮助！
回答by álvaro González
If you use JavaScript-based layout helpers (such as Foundation Equalizer) you need to ensure that the map container has the definitive size before you load the map so you don't get the infamous grey map and certain attributes like centerwork as expected—or use the third-party plug-in's events to trigger a custom callback that fixesthe map. E.g.:
如果您使用基于 JavaScript 的布局助手（例如Foundation Equalizer），则需要在加载地图之前确保地图容器具有确定的大小，以免获得臭名昭著的灰色地图和某些属性，例如center按预期工作——或者使用第三方插件的事件触发修复地图的自定义回调。例如：
var map = new google.maps.Map(/*...*/);
$(document).on("after-height-change.fndtn.equalizer", function(){
google.maps.event.trigger(map, 'resize');
});
回答by Matthew
My map was hidden in a Twitter Bootstrap tab, and so wasn't visible when the map initialised, so I needed to call resize when the tab was selected like so:
我的地图隐藏在Twitter Bootstrap 选项卡中，因此在地图初始化时不可见，因此我需要在选择选项卡时调用调整大小，如下所示：
$('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
google.maps.event.trigger(map, 'resize');
})
回答by APu
How it should be fixed:
应该如何修复：
You must have to initialize the map after the container (where you place the map) get's visible,
您必须在容器（放置地图的位置）可见后初始化地图，
请记住，加载和可见性是不一样的，您需要可见性。Like, I have many tabs & last tab contains the map, I fixed this issue by:
就像，我有很多标签，最后一个标签包含地图，我通过以下方式解决了这个问题：
$('#map-tab').click(function() {
// init map
});
Here, I first making sure that the container gets visibility (as clicking that element reveals the section contains the map) then initialized the map
在这里，我首先确保容器可见（因为单击该元素会显示该部分包含地图）然后初始化地图
This worked fine for me;
这对我来说很好；
