0

<details>-tagでの Google Maps JavaScript API V3 の実装に問題があります。-taginitialize();をクリックすると実行されます。<summary>初めてマップが正しく表示されますが、<details>タグを閉じて再度開くと正しく表示されません。

問題

Google マップ API

HTML

<details id="address">

    <summary onclick="initialize();">My map</summary>

    <div id="maps" class="box box_addon">

        <div id="map_canvas1"></div>
        <div id="map_canvas2"></div>

    </div>

</details>

Javascript

function initialize() {

    var isOpen = ($('#address').attr('open') == 'open');

    if(!isOpen){

        var centerPosition = new google.maps.LatLng(<?php echo $coords['lat']; ?>, <?php echo $coords['lng']; ?>);

        var mapOptions;
        var map;
        var marker;

        // Karta 1

        mapOptions = {
            zoom: 9,
            center: centerPosition,
            mapTypeId: google.maps.MapTypeId.ROADMAP,
            scrollwheel: false,
            streetViewControl: false,
            mapTypeControl: false

        };

        map = new google.maps.Map(document.getElementById('map_canvas1'), mapOptions);

        marker = new google.maps.Marker({
            map: map,
            animation: google.maps.Animation.DROP,
            position: centerPosition
        });

        // Karta 2

        mapOptions = {
            zoom: 17,
            center: centerPosition,
            mapTypeId: google.maps.MapTypeId.HYBRID,
            scrollwheel: false,
            streetViewControl: false,
            mapTypeControl: false
        };

        map = new google.maps.Map(document.getElementById('map_canvas2'), mapOptions);

        marker = new google.maps.Marker({
            map: map,
            animation: google.maps.Animation.DROP,
            position: centerPosition
        });

    }

}
4

1 に答える 1

2

マップを再度開いた後、マップのサイズ変更イベントをトリガーしてみてください。

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

ドキュメントから

開発者は、div のサイズが変更されたときにマップ上でこのイベントをトリガーする必要があります: google.maps.event.trigger(map, 'resize') 。

于 2013-07-25T14:15:14.063 に答える