0

私はGoogleマップで問題に直面しています.Google 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マークアップですが、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>
4

1 に答える 1

2

You have to trigger the map to resize when you've changed the div dimensions

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

from the api reference - 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') .

With your example code, you might want to store a reference to the related map on that element when you create it:

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

then access the map when you animate the element:

$('.map_canvas').first().slideDown(function(){
  var map = $(this).data('gmap');
  google.maps.event.trigger(map, 'resize');
})
于 2013-09-03T10:58:46.233 に答える