Google地图在隐藏div时不显示 [英] Google map not showing when in a hidden div
问题描述
我知道这是本网站和其他地方报道的常见问题，例如
但我无法解决我的问题。
因此，我有一个首先构建移动设备的响应网站，我试图获得适应性地图解决方案，即移动视口可以获取静态Google地图图像，而非移动视口则可以获得完整的Google地图API，而这一切必须在视口大小调整时自行更新，而不仅仅是页面加载。基于此： http://codepen.io/bradfrost/pen/tLxAs 。
我使用 此库 。
我通过jQuery的 $。getScript 和库 setup（）和 defer（）函数。
为了在每个视口只显示正确的地图，我使用jQuery hide（）和 show（）因为这个API地图不会完全加载自己（只有1个tile），它的加载效果很好，如果页面加载到非移动视口大小，它当您将移动视口调整回非移动视口尺寸时，就像 show（）方法一样。其他一切正常。
以下是我的代码：
HTML
< div class =map>
< div class =map__static>
< img src =http://maps.google.com/maps/api/staticmap?center=-33.867487,151.20699&zoom=15&markers=-33.867487,151.20699&size=650x405&传感器=假>
< / div>
< / div>
静态地图图像默认加载，因为网站首先构建为Mobile。
JS
var mapContainer = $（'。map '），
mapStaticContainer = $（'。map__static'）;
mapDynamicContainer = $（'< div class =map__dynamic/>'）;
//开始查询library
enquire.register（'screen and（min-width：40em）'，{
deferSetup：true，
setup：function setup（）{
mapContainer.prepend（mapDynamicContainer）;
mapDynamicContainer.load（'/ includes / scripts / adaptive-google-map.php'，function（）{
$ .getScript（'https://maps.googleapis.com/maps/api/js?key=AIzaSyAywjPmf5WvWh_cIn35NwtIk-gYuwu1I2Q&sensor=false&callback=initialize'）;
}）; $ b $ （）;
mapStaticContainer.hide（）;
mapDynamicContainer.show（）;
$ b //不是手机大小的视口
match：function （）;
mapStaticContainer.show（）;
mapDynamicContainer.hide（）;
//
//移动大小的视口
不匹配： }
}，true）.listen（）;
这是'/ includes / scripts / adaptive-google-map.php的内容'，它是通过jQuery load（）中的AJAX处理的。
< div id =map_canvas>< / div>
< script>
函数initialize（）{
var myLatlng = new google.maps.LatLng（-33.867487,151.20699）;
var myOptions = {
zoom：15，
center：myLatlng，
mapTypeId：google.maps.MapTypeId.ROADMAP，
scrollwheel：false
}
map = new google.maps.Map（document.getElementById（'map_canvas'），myOptions）;
var marker = new google.maps.Marker（{
position：myLatlng，
map：map，
animation：google.maps.Animation.DROP
}） ;
var contentString =
'< div class =infowindow>'+
'< div>'+
'< p class =flush> < strong> SALES OFFICE：< / strong>< br> 1/16 M. 5< br> Sydney< br> NSW，83110.< / p>'
'< / div>' +
'< / div>'
;
var infowindow = new google.maps.InfoWindow（{
content：contentString
}）;
google.maps.event.addListener（marker，'click'，function（）{
infowindow.open（map，marker）;
}）;
//在浏览器中调整Google地图（V3）中心大小（http://stackoverflow.com/questions/8792676/center-google-maps-v3-on-browser-resize-responsive）
var center ;
函数calculateCenter（）{
center = map.getCenter（）;
google.maps.event.addDomListener（map，'idle'，function（）{
calculateCenter（）;
}）;
google.maps.event.addDomListener（window，'resize'，function（）{
map.setCenter（center）;
}）;
}
< / script>
解决了这个问题：
<$ p $ （）函数（）{
setTimeout（function（）{
initialize（）;
}，100）;
}）
但是会抛出一个JS错误：未捕获的ReferenceError：initialize未定义。另一个常见的修复建议由ppl。是应用这个： google.maps.event.trigger（map，'resize'）; 但是当我把它放在后面时： mapDynamicContainer.show（） ; 在 match（）函数中我得到这个JS错误： Uncaught ReferenceError：google没有定义。
没有太多的运气：（
）调整大小仍然是您的答案。
我只是将您的匹配修改为这段代码：
<$ p $（）;
if（typeof（map）！='undefined'）; $ b $
match：function（）{
mapStaticContainer.hide（）;
mapDynamicContainer.show ）{
var center = map.getCenter（）;
google.maps.event.trigger（map，resize）;
map.setCenter（center）;
}
}，
并且它正在工作
不知道您是否有您的代码中的任何其他内容我使用了html，js和您提供的adaptive-google-map.php的内容，并且它没有任何问题。
I know this is a common issue reported on this site and elsewhere e.g.
But I can't get my issue solved.
So I've got a responsive site built Mobile first and I'm trying to get an adaptive map solution working i.e. mobile viewports get a static Google map image and for non-mobile viewports the full Google map API and this all has to update itself when the viewport resizes not just on page load. Based on this: http://codepen.io/bradfrost/pen/tLxAs.
I'm using this library.
I'm conditionally loading the Maps API only when it's needed (non-mobile viewports) via jQuery's $.getScript and the libraries setup() and defer() functions.
So that there's only the right map rendering at each viewport I'm using jQuery hide() and show() because of this the API map won't fully load itself (just 1 tile), well it does load fine if the page loads at a non-mobile viewport size, it's when you resize to mobile viewport back to non-mobile viewport size as that's when the show() method kicks in. Everything else works fine.
Here's my code:
HTML
<div class="map">
<div class="map__static">
<img src="http://maps.google.com/maps/api/staticmap?center=-33.867487,151.20699&zoom=15&markers=-33.867487,151.20699&size=650x405&sensor=false">
</div>
</div>
The static map image is loaded by default as the site is built Mobile first.
JS
var mapContainer = $('.map'),
mapStaticContainer = $('.map__static');
mapDynamicContainer = $('<div class="map__dynamic"/>');
// Start Enquire library
enquire.register('screen and (min-width: 40em)', {
deferSetup: true,
setup: function setup() {
mapContainer.prepend(mapDynamicContainer);
mapDynamicContainer.load('/includes/scripts/adaptive-google-map.php', function() {
$.getScript('https://maps.googleapis.com/maps/api/js?key=AIzaSyAywjPmf5WvWh_cIn35NwtIk-gYuwu1I2Q&sensor=false&callback=initialize');
});
},
// Not mobile size viewport
match: function() {
mapStaticContainer.hide();
mapDynamicContainer.show();
},
// Mobile size viewport
unmatch: function() {
mapStaticContainer.show();
mapDynamicContainer.hide();
}
}, true).listen();
This is the contents of '/includes/scripts/adaptive-google-map.php' which is AJAX'd in via jQuery load().
<div id="map_canvas"></div>
<script>
function initialize() {
var myLatlng = new google.maps.LatLng(-33.867487,151.20699);
var myOptions = {
zoom: 15,
center: myLatlng,
mapTypeId: google.maps.MapTypeId.ROADMAP,
scrollwheel: false
}
map = new google.maps.Map(document.getElementById('map_canvas'), myOptions);
var marker = new google.maps.Marker({
position: myLatlng,
map: map,
animation: google.maps.Animation.DROP
});
var contentString =
'<div class="infowindow">'+
'<div>'+
'<p class="flush"><strong>SALES OFFICE:</strong><br>1/16 M. 5<br>Sydney<br>NSW, 83110.</p>'
'</div>'+
'</div>'
;
var infowindow = new google.maps.InfoWindow({
content: contentString
});
google.maps.event.addListener(marker, 'click', function() {
infowindow.open(map,marker);
});
// Center Google Maps (V3) on browser resize (http://stackoverflow.com/questions/8792676/center-google-maps-v3-on-browser-resize-responsive)
var center;
function calculateCenter() {
center = map.getCenter();
}
google.maps.event.addDomListener(map, 'idle', function() {
calculateCenter();
});
google.maps.event.addDomListener(window, 'resize', function() {
map.setCenter(center);
});
}
</script>
This fixes the problem:
mapDynamicContainer.show(function () {
setTimeout(function() {
initialize();
}, 100);
})
But throws a JS error: Uncaught ReferenceError: initialize is not defined. Another common fix suggested by ppl. is applying this: google.maps.event.trigger(map, 'resize'); but when I put that after: mapDynamicContainer.show(); in the match() function I get this JS error: Uncaught ReferenceError: google is not defined.
Not having much luck :(
OK, so basically the "resize" is still your answer.
I just modified your match to this piece of code:
match: function() {
mapStaticContainer.hide();
mapDynamicContainer.show();
if( typeof(map) != 'undefined'){
var center = map.getCenter();
google.maps.event.trigger(map, "resize");
map.setCenter(center);
}
},
and it's working. don't know if you have any other stuff in your code. I used html, js, and content of adaptive-google-map.php you provide and it works without any problems.
这篇关于Google地图在隐藏div时不显示的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
