Google地图显示：无问题
我试图设置一个Google地图，当点击一个链接时会显示，然后点击另一个链接时隐藏。 一切工作正常，除了当我显示从地图显示：无，它不能正确显示。
我读了关于使用google.maps.event.trigger（地图，'resize'）; 但我不熟练使用Javascript和JQuery知道如何添加它。
这是我一直在使用的代码：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 TRANSITIONAL//EN"> <html> <head> <title></title> <style type="text/css"> #viewmap { position:relative; width:944px; float:left; display:none; } #hidemap { position:relative; width:944px; float:left; display:block; } #map_canvas { position:relative; float:left; width:944px; height:300px; } </style> <script type="text/javascript" src="http://maps.google.com/maps/api/js?v=3.2&sensor=false"> </script> <script type="text/javascript"> function initialize() { var latlng = new google.maps.LatLng(-27.999673,153.42855); var myOptions = { zoom: 15, center: latlng, mapTypeId: google.maps.MapTypeId.ROADMAP, mapTypeControl: true, mapTypeControlOptions: { style: google.maps.MapTypeControlStyle.DROPDOWN_MENU } }; var map = new google.maps.Map(document.getElementById("map_canvas"),myOptions); var contentString = 'blah'; var infowindow = new google.maps.InfoWindow({ content: contentString }); var marker = new google.maps.Marker({ position: latlng, map: map }); google.maps.event.addListener(marker, 'click', function() { infowindow.open(map,marker); }); } google.maps.event.addDomListener(window, 'load', initialize); </script> <script type="text/javascript"> function toggleDiv1(viewmap){ if(document.getElementById(viewmap).style.display == 'block'){ document.getElementById(viewmap).style.display = 'none'; }else{ document.getElementById(viewmap).style.display = 'block'; } } function toggleDiv2(hidemap){ if(document.getElementById(hidemap).style.display == 'none'){ document.getElementById(hidemap).style.display = 'block'; }else{ document.getElementById(hidemap).style.display = 'none'; } } </script> </head> <body> <div id="viewmap"> <a href="#" onmousedown="toggleDiv1('viewmap'); toggleDiv2('hidemap');">Hide map</a> <div id="map_canvas"></div> </div> <div id="hidemap"> <a href="#" onmousedown="toggleDiv1('viewmap'); toggleDiv2('hidemap');">View map</a> </div> </body> </html> 任何帮助将非常感激，
昆廷
这个问题也发生在jquery选项卡上，而不是应用“display：none”，你可以尝试用这种方法来隐藏地图：
在尝试隐藏地图时添加以下样式，而不是使用display：none
position: absolute; left: -100%;
你也可以添加如下的转换：transition：left 1s ease;
显示地图后，您可以尝试使用Google事件侦听器来触发它：
<script type="text/javascript"> var map; //I placed here the map variable so other functions can see it. var latlng = new google.maps.LatLng(-27.999673,153.42855); // in order to center again the map... function initialize() { var myOptions = { zoom: 15, center: latlng, mapTypeId: google.maps.MapTypeId.ROADMAP, mapTypeControl: true, mapTypeControlOptions: { style: google.maps.MapTypeControlStyle.DROPDOWN_MENU } }; map = new google.maps.Map(document.getElementById("map_canvas"),myOptions); var contentString = 'blah'; var infowindow = new google.maps.InfoWindow({ content: contentString }); var marker = new google.maps.Marker({ position: latlng, map: map }); google.maps.event.addListener(marker, 'click', function() { infowindow.open(map,marker); }); } google.maps.event.addDomListener(window, 'load', initialize); </script> <script type="text/javascript"> function toggleDiv1(viewmap){ if(document.getElementById(viewmap).style.display == 'block'){ document.getElementById(viewmap).style.display = 'none'; }else{ document.getElementById(viewmap).style.display = 'block'; //here is where your map is being displayed again, try here // to trigger the resize event. google.maps.event.trigger(map, 'resize'); map.setCenter(latlng); } } function toggleDiv2(hidemap){ if(document.getElementById(hidemap).style.display == 'none'){ document.getElementById(hidemap).style.display = 'block'; }else{ document.getElementById(hidemap).style.display = 'none'; } } </script>
我今天遇到了同样的问题，最终在官方的Google Maps JavaScript API V3 Reference中发现 ：
当div更改大小时，开发人员应该在地图上触发此事件：
google.maps.event.trigger(map, 'resize')。
作为display:none等价于使用大小为0的<div> ，将其改为display:block实际上是大小的改变，因此触发地图大小调整事件是必要的。
为我工作就像一个魅力。
地图大小的问题是它需要知道它所呈现的div的大小。 目前，当你正在初始化一个文件加载的地图，当你的div被隐藏起来，所以地图无法正确计算它的大小 – 为了解决这个问题，你只需要在第一次显示div（不是onload）时初始化它。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 TRANSITIONAL//EN"> <html> <head> <title></title> <style type="text/css"> #viewmap { position:relative; width:944px; float:left; display:none; } #hidemap { position:relative; width:944px; float:left; display:block; } #map_canvas { position:relative; float:left; width:944px; height:300px; } </style> <script type="text/javascript" src="http://maps.google.com/maps/api/js?v=3.2&sensor=false"> </script> <script type="text/javascript"> //your global map object var map = null; function initialize() { var latlng = new google.maps.LatLng(-27.999673,153.42855); var myOptions = { zoom: 15, center: latlng, mapTypeId: google.maps.MapTypeId.ROADMAP, mapTypeControl: true, mapTypeControlOptions: { style: google.maps.MapTypeControlStyle.DROPDOWN_MENU } }; map = new google.maps.Map(document.getElementById("map_canvas"),myOptions); var contentString = 'blah'; var infowindow = new google.maps.InfoWindow({ content: contentString }); var marker = new google.maps.Marker({ position: latlng, map: map }); google.maps.event.addListener(marker, 'click', function() { infowindow.open(map,marker); }); } function toggleDiv1(viewmap){ if(document.getElementById(viewmap).style.display == 'block'){ document.getElementById(viewmap).style.display = 'none'; }else{ document.getElementById(viewmap).style.display = 'block'; //check if map object exists (it is created by you initialize function), if not initialize it if (!map) { initialize(); } } } function toggleDiv2(hidemap){ if(document.getElementById(hidemap).style.display == 'none'){ document.getElementById(hidemap).style.display = 'block'; }else{ document.getElementById(hidemap).style.display = 'none'; } } </script> </head> <body> <div id="viewmap"> <a href="#" onmousedown="toggleDiv1('viewmap'); toggleDiv2('hidemap');">Hide map</a> <div id="map_canvas"></div> </div> <div id="hidemap"> <a href="#" onmousedown="toggleDiv1('viewmap'); toggleDiv2('hidemap');">View map</a> </div> </body> </html>
当你想显示它时，只需要初始化地图。 我有同样的问题，并通过这种方式解决。
删除这一行：
google.maps.event.addDomListener(window, 'load', initialize);
并以这种方式更改toggleDiv脚本：
function toggleDiv1(viewmap){ if(document.getElementById(viewmap).style.display == 'block'){ document.getElementById(viewmap).style.display = 'none'; }else{ document.getElementById(viewmap).style.display = 'block'; initialize(); } } function toggleDiv2(hidemap){ if(document.getElementById(hidemap).style.display == 'none'){ document.getElementById(hidemap).style.display = 'block'; }else{ document.getElementById(hidemap).style.display = 'none'; } }
.map_container {display：none;}
$('.show_hide').click(function(){ $('.map_container').toggle({ complete:function (){ google.maps.event.trigger(map, 'resize'); }, duration:'slow' }); })
你最好使用左外技巧！
这是我的编辑：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 TRANSITIONAL//EN"> <html> <head> <title></title> <style type="text/css"> #viewmap { position:relative; width:944px; float:left; } #hidemap { position:relative; width:944px; float:left; } #map_canvas { position:relative; float:left; width:944px; height:300px; } .good-bye { position: absolute !important; left: -10000px !important; } </style> <script type="text/javascript" src="http://maps.google.com/maps/api/js?v=3.2&sensor=false"> </script> <script type="text/javascript"> function initialize() { var latlng = new google.maps.LatLng(-27.999673,153.42855); var myOptions = { zoom: 15, center: latlng, mapTypeId: google.maps.MapTypeId.ROADMAP, mapTypeControl: true, mapTypeControlOptions: { style: google.maps.MapTypeControlStyle.DROPDOWN_MENU } }; var map = new google.maps.Map(document.getElementById("map_canvas"),myOptions); var contentString = 'blah'; var infowindow = new google.maps.InfoWindow({ content: contentString }); var marker = new google.maps.Marker({ position: latlng, map: map }); google.maps.event.addListener(marker, 'click', function() { infowindow.open(map,marker); }); } google.maps.event.addDomListener(window, 'load', initialize); </script> <script type="text/javascript"> function toggleDiv1(viewmap){ if(hasClass(document.getElementById(viewmap), 'good-bye')) removeClass(document.getElementById(viewmap), 'good-bye'); else addClass(document.getElementById(viewmap), 'good-bye'); return; } function toggleDiv2(hidemap){ if(hasClass(document.getElementById(hidemap), 'good-bye')) removeClass(document.getElementById(hidemap), 'good-bye'); else addClass(document.getElementById(hidemap), 'good-bye'); return; } // http://snipplr.com/view/3561/addclass-removeclass-hasclass/ function hasClass(ele,cls) { return ele.className.match(new RegExp('(\\s|^)'+cls+'(\\s|$)')); } function addClass(ele,cls) { if (!this.hasClass(ele,cls)) ele.className += " "+cls; } function removeClass(ele,cls) { if (hasClass(ele,cls)) { var reg = new RegExp('(\\s|^)'+cls+'(\\s|$)'); ele.className=ele.className.replace(reg,' '); } } </script> </head> <body> <div id="viewmap" class="good-bye"> <a href="#" onmousedown="toggleDiv1('viewmap'); toggleDiv2('hidemap'); return false;">Hide map</a> <div id="map_canvas"></div> </div> <div id="hidemap"> <a href="#" onmousedown="toggleDiv1('viewmap'); toggleDiv2('hidemap');">View map</a> </div> </body> </html>
示例链接 。
很简单…到初始化地图的时候，所有的外部div都必须显示出来。
所以刚刚初始化地图：
setTimeout(function(){ $mapsOuterDiv.slideToggle(700); setTimeout(function(){ initializeGoogleMap(); },300); },300);
另外我find了另一个解决scheme。 有时你需要调用谷歌地图对象的refresh()和地图将被迫resize。
// gmaps - instance of particular map ... gmaps.refresh()
此代码正常工作（使用jQuery 1.2.6）：Css： #gog-map{position:absolute; visibility:hidden;} #gog-map{position:absolute; visibility:hidden;}
$(document).ready(function() { $('a#link').click(function() { if ($('#gog-map').is(':visible')){ $('#gog-map').slideUp('slow'); } else{ $('#gog-map').slideDown('slow'); $("#gog-map").css('visibility','inherit'); $("#gog-map").css('position','relative'); } return false; }); });
document.getElementById('map_canvas').style.display = 'none';
这对我的工作很好 – 不知道是否因为我隐藏的canvas，而不是包含div ….在IE浏览器，Firefox和Chrome的罚款。 当隐藏地图canvas时，确定您可以隐藏您的容器。
我一直试图animation我的地图没有运气，最后想出了这个：
CSS：我们设置地图包装的position:absolute; 和visibility:hidden; 因为它必须有正常的尺寸才能正确渲染。
JavaScript的：
$(document).ready(function() { // We then run this function only once per page load. It places out map back in the document flow but hides it before it starts to toggle its height. $("#mapBtn").one("click", function() { $("#myMap").hide(); $("#myMap").css("visibility", "inherit"); $("#myMap").css("position", "relative"); }); // And now we toggle away nicely $("#mapBtn").click(function() { $("#myMap").slideToggle(400); }); });
一般来说，google.maps.event.trigger（map，'resize'）将会刷新地图，并在每次显示时追加代码，因为之前的显示状态是“none”：
document.getElementById(hidemap).style.display = 'block'; Generally google.maps.event.trigger(map, 'resize')
