谷歌地图不能正常工作

Question

我正面临谷歌地图中的问题，我正在使用谷歌api V3并在页面上使用多个地图，所有地图在单独的页面上工作正常，但当我在我的网站中使用它看起来像下面的图像

实际上，当用户点击更多信息链接时，地图默认隐藏，然后地图向下滑动（使用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 markeup，但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尺寸

时，必须触发地图调整大小

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

来自api参考的

- https://developers.google.com/maps/documentation/javascript/3.exp/reference

  

当div更改大小时，开发人员应在地图上触发此事件：google.maps.event.trigger（map，'resize'）。

---

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

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

然后在为元素设置动画时访问地图：

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