Google Detail JavaScript API V3在<details> -tag </details>中出现问题

Question

我在<details> - 代码中实施Google Maps JavaScript API V3时遇到问题。单击initialize(); - 标记时，我会运行<summary>。第一次正确显示地图但如果我关闭<details> - 标记并再次打开它则无法正确显示。

问题

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
        });

    }

}

Answer 1

尝试在再次打开地图后触发地图的调整大小事件。

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

来自文档

  

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