Google 地图显示 none 文档准备就绪

Question

Google 地图的包装器有问题。 class 由文档准备好设置为 display:none。如果我单击 link，则必须在 show() 上设置地图。可以用，但是地图显示不正确

截图如下：

这是我的 JSFiddle 示例。

这是我的 HTML 代码：

<a href="#" class="advertise-map">show map</a>

<div class="advertise-mapper">
        <div class="responsiveContaineradv">
      <div id="map-canvas" class="map-adver"></div>
  </div>
</div>

这是我的 JS 代码：

jQuery(document).ready(function() {

    jQuery(document).on("click", ".advertise-map", function(e) {
        e.preventDefault();
        jQuery('.advertise-mapper').show();
    });

});

var map;

function initialize() {

    var locations = [
        ['<h4>BMX Golden MILE 20 Fahrrad</h4>250.00 €<br><a href="/kleinanzeigen/umkreissuche.html++/anzeige/4700879709943/">zur Kleinanzeige</a>', 51.4627921, 6.9787572],
        ['<h4>Apple Macbook Air 13 A1466 Juni 2013</h4>800.00 €<br><a href="/kleinanzeigen/umkreissuche.html++/anzeige/62217508741/">zur Kleinanzeige</a>', 51.665041, 7.631431],
        ['<h4>Apple iPod nano 16 GB Grün 6. Generation</h4>60.00 € VB<br><a href="/kleinanzeigen/umkreissuche.html++/anzeige/06618901051/">zur Kleinanzeige</a>', 51.5096015, 7.377755],
    ];
    var myLatlng = new google.maps.LatLng(51.513587, 7.465298);

    var mapOptions = {
        zoom: 11,
        center: myLatlng
    }

    var infowindow = new google.maps.InfoWindow({
        maxWidth: 360
    });

    var map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);

    var markers = new Array();

    for (var i = 0; i < locations.length; i++) {
        var marker = new google.maps.Marker({
            position: new google.maps.LatLng(locations[i][1], locations[i][2]),
            map: map,
            animation: google.maps.Animation.DROP
        });

        markers.push(marker);

        google.maps.event.addListener(marker, 'click', (function(marker, i) {
            return function() {
                infowindow.setContent(locations[i][0]);
                infowindow.open(map, marker);
            }
        })(marker, i));
    }

    function autoCenter() {
        //  Create a new viewpoint bound
        var bounds = new google.maps.LatLngBounds();
        //  Go through each...
        for (var i = 0; i < markers.length; i++) {
            bounds.extend(markers[i].position);
        }
        //  Fit these bounds to the map
        map.fitBounds(bounds);
    }
    autoCenter();

}

google.maps.event.addDomListener(window, 'load', initialize);

如何让地图在显示时正确显示？

Answer 1

我会做一些小的更正，其中最重要的是评论中提到的 goecodezip。

在您点击 .advertise-map 时，添加地图调整大小（重要）和自动居中（可选）。

jQuery(document).on("click",".advertise-map",function(e){
    e.preventDefault();
    jQuery('.advertise-mapper').show();
    google.maps.event.trigger(map, "resize");
    autoCenter();
});

接下来，我将 'markers' 设为全局变量：

var map;
var markers = new Array();

最后，我将从初始化函数中移出 autoCenter() 函数。

经过所有这些更改，我相信这就是您要找的：http://jsfiddle.net/2xn7wywo/22/

Google 地图显示 none 文档准备就绪

Google Maps display none document ready

css

google-maps