0

i am facing the problem in google maps, i am using google api V3 and using multiple maps on a page, all the maps works fine on a seperate page but when i use in my website it looks like image below

enter image description here

Actually the map is by default hide when user click on more info link then the maps slide down (using 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);
            }
        });
    });
});

here is html markeup but the data in the divs comes dynamically from database

<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>
4

1 回答 1

2

当您更改 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');
})
于 2013-09-03T10:58:46.233 回答