embedded谷歌地图是错误的显示，直到resize的网页
我正在试图在我的网页上显示一个地图来获取坐标。 它工作正常，我可以拖放一个标记，并在input框中获取坐标。
但是当我加载网页时，我的问题就来了。 一切都很好显示，但地图，在这里你可以看到如何显示地图：
但是，如果在这一刻我调整网页，我的意思是，如果它是全屏，把它的一半。 或者，如果它只是屏幕的一部分，就把它做大或小一点。 然后，你会看到正确的地图： 
（我知道，这是不一样的地方，我从2次重新载入图像）
我用HTML创build网页，但是我把它称为不同的网页。 当你加载索引时，你会得到一个button
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
而所有的divs，form …都能正常closures。 我有很多input框和字段，我没有把它们放在这里。
然后，在我的谷歌地图脚本，我有这个：
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" }); }
但我不知道为什么我需要resize。 这是解决这个问题的方法吗？
编辑：我添加更多的信息：
我用这种方式调用具有地图的网页部分：
$(document).on("pageinit", '#openMap', function() {
我试图把
google.maps.event.trigger(map, 'resize');
就在它后面，但没有任何反应。
解：
我发现其他问题的解决scheme（ 谷歌地图v3部分地在左上angular加载，resize事件不起作用 ，Ian Devlin发帖）：
正如一位用户在这里说的，我需要调整地图大小。 但是，只是这一行没有奏效。 我在初始化函数的末尾添加了这个代码：
google.maps.event.addListenerOnce(map, 'idle', function() { google.maps.event.trigger(map, 'resize'); });
所以它只是在地图显示之后调用。
我也遇到过这个问题，我通过触发Google地图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'); }
希望你能理解。
我有一个类似的问题，但你看不到任何地图（整个盒子是灰色的）。
为了解决这个问题，我意识到包含地图的div是隐藏起来的
display:none;
如果你改用
visibility:hidden;
div保留其大小，但仍然显示为隐藏，所以初始化时的地图使用其正确的高度和宽度，而不是0值
希望这可以帮助！
如果您使用基于JavaScript的布局帮助程序（例如Foundation Equalizer ），则需要确保地图容器在加载地图之前具有确定的大小，以便您不会像预期的那样获得臭名昭着的灰色地图和某些特定属性（如center工作）或使用第三方插件的事件触发修复地图的自定义callback。 例如：
var map = new google.maps.Map(/*...*/); $(document).on("after-height-change.fndtn.equalizer", function(){ google.maps.event.trigger(map, 'resize'); });
我的地图隐藏在Twitter Bootstrap选项卡中 ，所以在地图初始化时不可见，所以我需要在select选项卡时调用resize，如下所示：
$('a[data-toggle="tab"]').on('shown.bs.tab', function (e) { google.maps.event.trigger(map, 'resize'); })
应该如何修复：
您必须在容器（放置地图的位置）可见之后初始化地图，
请记住，加载和可见性不一样，你需要知名度。
就像我有很多标签和最后一个标签包含地图，我通过以下方法解决了这个问题：
$('#map-tab').click(function() { // init map });
在这里，我首先确保容器可见性（点击该元素显示该部分包含地图），然后初始化地图
这对我很好，
