谷歌地圖不顯示何時在隱藏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的內容，並且沒有任何問題。