谷歌地图不显示何时在隐藏div

Question

我知道这是本网站和其他地方报告的常见问题，例如，

• http://blog.codebusters.pl/en/entry/google-maps-in-hidden-div
• http://dougmolineux.com/wp/?p=242

但我不能让我的问题解决了。

所以我有一个响应网站建立移动第一，我试图得到一个适应性地图解决方案工作，即移动视口获取静态谷歌地图图像和非移动视口全谷歌地图API和这一切必须在视口大小调整时自行更新，而不仅仅是页面加载。基于此：http://codepen.io/bradfrost/pen/tLxAs。

我使用this library。

我通过jQuery的$.getScript和库setup()和defer()函数仅在需要时（非移动视口）有条件地加载Maps API。

因此，在每个视口只有正确的地图渲染我正在使用jQuery hide()和show()因为这个API地图不会完全加载自己（只有1瓦），以及它加载罚款，如果页面加载在非移动视口尺寸下，当您将移动视口调整回非移动视口尺寸时，就像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&sensor=false"> 
    </div> 
</div> 

静态地图图像被默认加载该网站是第一个内置了手机。

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(); 

这是其通过jQuery load() AJAX'd在的'/includes/scripts/adaptive-google-map.php'内容。

<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> 

这解决了这个问题：

mapDynamicContainer.show(function() { 
    setTimeout(function() { 
    initialize(); 
}, 100); 
}) 

但抛出一个JS错误：Uncaught ReferenceError: initialize is not defined。另一个常见的修复建议由ppl。应用这个：google.maps.event.trigger(map, 'resize');但是当我把那个后：mapDynamicContainer.show();在match()函数我得到这个JS错误：Uncaught ReferenceError: google is not defined。

运气不好:(

Answer 1

OK，所以基本上“调整”还是你的答案

我只是修改了比赛这段代码：

match: function() { 
    mapStaticContainer.hide(); 
    mapDynamicContainer.show(); 
    if(typeof(map) != 'undefined'){ 
     var center = map.getCenter(); 
     google.maps.event.trigger(map, "resize"); 
     map.setCenter(center); 
    } 
}, 

和它正在工作。 不知道你的代码中是否有其他东西。我使用了html，js以及您提供的adaptive-google-map.php的内容，并且没有任何问题。