javascript - 谷歌地图无法正常工作

Question

我在谷歌地图中遇到问题，我正在使用谷歌API V3并在页面上使用多个 map ，所有 map 在单独的页面上都可以正常工作，但是当我在我的网站中使用时，它看起来像下面的图片

实际上，当用户单击更多信息链接时， map 默认隐藏，然后 map 向下滑动(使用slideToggle())；

$(document).ready(function() {
    $maps = $('.map_canvas');
    $maps.each(function(index, Element) {
        $infotext = $(Element).children('.infotext');

        var myOptions = {
            'zoom': parseInt($infotext.children('.zoom').text()),
            'mapTypeId': google.maps.MapTypeId.ROADMAP
        };
        var map;
        var geocoder;
        var marker;
        var infowindow;
        var address = $infotext.children('.address').text() + ', '
                + $infotext.children('.city').text() + ', '
                + $infotext.children('.state').text() + ' '
                + $infotext.children('.zip').text() + ', '
                + $infotext.children('.country').text()
        ;
        var content = '<strong>' + $infotext.children('.location').text() + '</strong><br />'
                + $infotext.children('.address').text() + '<br />'
                + $infotext.children('.city').text() + ', '
                + $infotext.children('.state').text() + ' '
                + $infotext.children('.zip').text()
        ;
        if (0 < $infotext.children('.phone').text().length) {
            content += '<br />' + $infotext.children('.phone').text();
        }

        geocoder = new google.maps.Geocoder();
        geocoder.geocode({'address': address}, function(results, status) {
            if (status == google.maps.GeocoderStatus.OK) {
                myOptions.center = results[0].geometry.location;
                map = new google.maps.Map(Element, myOptions);
                marker = new google.maps.Marker({
                    map: map,
                    position: results[0].geometry.location,
                    title: $infotext.children('.location').text()
                });
                infowindow = new google.maps.InfoWindow({'content': content});
                google.maps.event.addListener(map, 'tilesloaded', function(event) {
                    infowindow.open(map, marker);
                });
                google.maps.event.addListener(marker, 'click', function() {
                    infowindow.open(map, marker);
                });
            } else {
                alert('The address could not be found for the following reason: ' + status);
            }
        });
    });
});

这里是 html 标记，但 div 中的数据动态来自数据库

<div class="map_canvas">
                <div class="infotext">
                    <div class="location">Chácara do João</div>
                    <div class="address">Av andrade neves, 2333</div>
                    <div class="city">Campinas</div>
                    <div class="state">SP</div>
                    <div class="zip">33401-3995</div>
                    <div class="country">USA</div>
                    <div class="phone">(561) 659-4050</div>
                    <div class="zoom">1</div>
                </div>
            </div>

Answer 1

当您更改 div 尺寸时，您必须触发 map 调整大小

google.maps.event.trigger(map, 'resize');

来自 API 引用 - https://developers.google.com/maps/documentation/javascript/3.exp/reference

Developers should trigger this event on the map when the div changes size: google.maps.event.trigger(map, 'resize') .

<小时/>

使用示例代码，您可能希望在创建该元素时存储对该元素上相关 map 的引用:

$(Element).data('gmap', map);

然后在为元素设置动画时访问 map :

$('.map_canvas').first().slideDown(function(){
  var map = $(this).data('gmap');
  google.maps.event.trigger(map, 'resize');
})