如何处理谷歌地图里面的隐藏div（更新图片）
我有一个页面，谷歌地图是在一个隐藏的div首先。 然后我点击链接后显示div，但只显示地图的左上angular。
我试过让这个代码在点击后运行：
map0.onResize(); 要么：
google.maps.event.trigger(map0, 'resize')
有任何想法吗。 这里是一个图像显示div与隐藏的地图后，我看到它。 
只是自己testing，这是我如何接近它。 相当简单，让我知道你是否需要任何澄清
HTML
<div id="map_canvas" style="width:700px; height:500px; margin-left:80px;" ></div> <button onclick="displayMap()">Show Map</button>
CSS
<style type="text/css"> #map_canvas {display:none;} </style>
使用Javascript
<script> function displayMap() { document.getElementById('map_canvas').style.display="block"; initialize(); } function initialize() { // create the map var myOptions = { zoom: 14, center: new google.maps.LatLng(0.0, 0.0), mapTypeId: google.maps.MapTypeId.ROADMAP } map = new google.maps.Map(document.getElementById("map_canvas"), myOptions); } </script>
我遇到同样的问题，发现当显示div时，调用google.maps.event.trigger(map, 'resize'); 这似乎为我解决了这个问题。
google.maps.event.trigger($("#div_ID")[0], 'resize');
如果你没有可用的variables映射，它应该是包含GMAP的div中的第一个元素（除非你做了一些愚蠢的事情）。
我在Bootstrap选项卡中有一个Google地图，显示不正确。 这是我的修复。
// Previously stored my map object(s) in googleMaps array $('a[href="#profileTab"]').on('shown', function() { // When tab is displayed... var map = googleMaps[0], center = map.getCenter(); google.maps.event.trigger(map, 'resize'); // fixes map display map.setCenter(center); // centers map correctly });
如何在您调整div的时候刷新地图
仅仅调用google.maps.event.trigger(map, 'resize');不够的google.maps.event.trigger(map, 'resize'); 你也应该重置地图的中心。
var map; var initialize= function (){ ... } var resize = function () { if (typeof(map) == "undefined") {) { // initialize the map. You only need this if you may not have initialized your map when resize() is called. initialize(); } else { // okay, we've got a map and we need to resize it var center = map.getCenter(); google.maps.event.trigger(map, 'resize'); map.setCenter(center); } }
如何倾听重新resize的事件
Angular（ng-show或ui-bootstrap折叠）
直接绑定到元素的可见性而不是绑定到ng-show的值，因为$ watch可以在ng-show更新之前触发（所以div仍然是不可见的）。
scope.$watch(function () { return element.is(':visible'); }, function () { resize(); } );
jQuery .show（）
使用内置的callback
$("#myMapDiv").show(speed, function() { resize(); });
Bootstrap 3 Modal
$('#myModal').on('shown.bs.modal', function() { resize(); })
我有同样的问题， google.maps.event.trigger(map, 'resize')不适合我。
我所做的就是把一个计时器更新地图后，把可见的div …
//CODE WORKING var refreshIntervalId; function showMap() { document.getElementById('divMap').style.display = ''; refreshIntervalId = setInterval(function () { updateMapTimer() }, 300); } function updateMapTimer() { clearInterval(refreshIntervalId); var map = new google.maps.Map(.... .... }
我不知道这是否是更方便的方法，但它的工作原理！
如果您通过复制/粘贴iframe代码插入Google地图，并且您不想使用Google地图API ，则这是一个简单的解决scheme。 当你显示隐藏的地图时，只需执行下面的javascript行。 它只需要iframe的HTML代码，并将其插入到相同的地方，所以它再次呈现：
document.getElementById("map-wrapper").innerHTML = document.getElementById("map-wrapper").innerHTML;
jQuery版本：
$('#map-wrapper').html( $('#map-wrapper').html() );
HTML：
.... <div id="map-wrapper"><iframe src="https://www.google.com/maps/..." /></div> ....
以下示例适用于初始隐藏在Bootstrap 3选项卡中的地图：
<script> $(document).ready( function() { /* Detects when the tab is selected */ $('a[href="#tab-id"]').on('shown.bs.tab', function() { /* When the tab is shown the content of the wrapper is regenerated and reloaded */ $('#map-wrapper').html( $('#map-wrapper').html() ); }); }); </script>
用jQuery你可以做这样的事情。 这有助于我在Umbraco CMS中加载一个Google地图，该地图上的标签不会立即显示。
function waitForVisibleMapElement() { setTimeout(function () { if ($('#map_canvas').is(":visible")) { // Initialize your Google Map here } else { waitForVisibleMapElement(); }; }, 100); }; waitForVisibleMapElement();
也可以只触发本机窗口大小调整事件。
Google地图会自动重新加载：
window.dispatchEvent(new Event('resize'));
我的解决scheme非常简单和高效：
HTML
<div class="map-wrap"> <div id="map-canvas"></div> </div>
CSS
.map-wrap{ height:0; width:0; overflow:hidden; }
jQuery的
$('.map-wrap').css({ height: 'auto', width: 'auto' }); //For showing your map $('.map-wrap').css({ height: 0, width: 0 }); //For hiding your map
或者，如果您使用gmaps.js ，请致电：
map.refresh();
当你的div显示。
我想最初的问题是在页面的隐藏div中初始化的地图。 在文档准备就绪之后，我通过调整隐藏div中的地图来解决类似的问题，无论其显示状态如何。 在我的情况下，我有2个地图，其中一个显示，一个在初始化时隐藏，我不想在每次显示时都初始化一个地图。 这是一个旧的post，但我希望它可以帮助任何正在寻找的人。
如果在Bootstrap v3选项卡中使用，以下应该工作：
$('a[href="#tab-location"]').on('shown.bs.tab', function(e){ var center = map.getCenter(); google.maps.event.trigger(map, 'resize'); map.setCenter(center); });
其中tab-location是包含地图的标签的标识。
正如John Doppelmann和HoffZ所指出的那样，将所有的代码放在一起，就像下面的div展示函数或onclick事件一样：
setTimeout(function(){ var center = map.getCenter(); google.maps.event.trigger(map, 'resize'); map.setCenter(center); });
它对我来说是完美的
我发现这对我有用：
隐藏：
$('.mapWrapper') .css({ visibility: 'hidden', height: 0 });
以显示：
$('.mapWrapper').css({ visibility: 'visible', height: 'auto' });
我的解决scheme是：
CSS：
.map { height: 400px; border: #ccc solid 1px; }
jQuery的：
$('.map').width(555); // width of map canvas
我不喜欢只有在隐藏的div已经可见之后才能加载地图。 例如，在一个旋转木马中，那真的不起作用。
这是我的解决scheme是添加类到隐藏的元素来取消隐藏，并将其隐藏绝对位置，然后渲染地图，并删除地图加载后的类。
在Bootstrap Carousel中testing。
HTML
<div class="item loading"><div id="map-canvas"></div></div>
CSS
.loading { display: block; position: absolute; }
JS
$(document).ready(function(){ // render map // google.maps.event.addListenerOnce(map, 'idle', function(){ $('.loading').removeClass('loading'); }); }
当你想显示地图时使用这一行代码。
$("#map_view").show("slow"); // use id of div which you want to show. var script = document.createElement("script"); script.type = "text/javascript"; script.src = "https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false&callback=initialize"; document.body.appendChild(script);
$("#map_view").show("slow"); // use id of div which you want to show. var script = document.createElement("script"); script.type = "text/javascript"; script.src = "https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false&callback=initialize"; document.body.appendChild(script);
第一篇文章。 我的googleMap div是在{display：none}的容器div中，直到点击tab。 与OP有同样的问题。 这对我工作：
google.maps.event.addDomListener(window, 'load', setTimeout(initialize, 1));
坚持这个代码里面，并在您的代码的末尾点击您的容器div选项卡，并显示您的隐藏div。 重要的是，在调用initialize之前，你的容器div必须是可见的。
我尝试了一些在这里提出的解决scheme和其他网页，他们不适合我。 让我知道这是否适合你。 谢谢。
在div之前添加此代码或将其传递给一个js文件：
<script> $(document).on("pageshow","#div_name",function(){ initialize(); }); function initialize() { // create the map var myOptions = { zoom: 14, center: new google.maps.LatLng(0.0, 0.0), mapTypeId: google.maps.MapTypeId.ROADMAP } map = new google.maps.Map(document.getElementById("div_name"), myOptions); } </script>
这个事件将在div加载后触发，所以它将刷新地图内容，而不必按F5键
在显示地图时，我对地址进行地理编码，然后设置地图中心。 google.maps.event.trigger(map, 'resize'); 没有为我工作。
我不得不使用map.setZoom(14);
代码如下：
document.getElementById('map').style.display = 'block'; var geocoder = new google.maps.Geocoder(); geocoder.geocode({ 'address': input.value }, function(results, status) { if (status == google.maps.GeocoderStatus.OK) { map.setCenter(results[0].geometry.location); var marker2 = new google.maps.Marker({ map: map, position: results[0].geometry.location }); map.setZoom(14); marker2.addListener('dragend', function (event) { $('#lat').val(event.latLng.lat()); $('#lng').val(event.latLng.lng()); }); } });
function init_map() { var myOptions = { zoom: 16, center: new google.maps.LatLng(0.0, 0.0), mapTypeId: google.maps.MapTypeId.ROADMAP }; map = new google.maps.Map(document.getElementById('gmap_canvas'), myOptions); marker = new google.maps.Marker({ map: map, position: new google.maps.LatLng(0.0, 0.0) }); infowindow = new google.maps.InfoWindow({ content: 'content' }); google.maps.event.addListener(marker, 'click', function() { infowindow.open(map, marker); }); infowindow.open(map, marker); } google.maps.event.addDomListener(window, 'load', init_map); jQuery(window).resize(function() { init_map(); }); jQuery('.open-map').on('click', function() { init_map(); });
<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'></script> <button type="button" class="open-map"></button> <div style='overflow:hidden;height:250px;width:100%;'> <div id='gmap_canvas' style='height:250px;width:100%;'></div> </div>
