谷歌地图在隐藏的 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();

这是 '/includes/scripts/adaptive-google-map.php' 的内容，通过 jQuery load() 进行 AJAX 处理。

<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

好的，所以基本上“调整大小”仍然是您的答案。

我刚刚将你的匹配修改为这段代码：

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的内容，它没有任何问题。