带有 gmaps.js 的 Jquery 对话框

Question

我在对话框中显示谷歌地图时遇到问题， map 显示在对话框中，如下所示

我正在使用gmaps.js图书馆显示谷歌地图和 jquery ui对于对话框

这是我的代码片段

<?php if ( ! empty( $latitude ) && ! empty( $longtitude ) ): ?>

    <li class="click-n-pick-span">
       <a href="#" id="opener-<?php echo $branch->ID ?>">
          <?php _e( 'Our location on map', \Click_And_Pick\Click_And_Pick::TEXTDOMAIN ) ?>
                            </a>
    </li>

    <div class="modal-header">
        <div class="dialog" id="map-<?php echo $branch->ID ?>-content"
                                 style="width:500px !important; height:500px !important"></div>
        </div>
<?php endif; ?>

和js如下:

<?php if ( ! empty( $latitude ) && ! empty( $longtitude ) ): ?>

    // google map
    var map = new GMaps({
    div: '#map-<?php echo $branch->ID ?>-content',
    lat: <?php echo $latitude ?>,
    lng: <?php echo $longtitude ?>
    });

    map.addMarker({
        lat: <?php echo $latitude ?>,
        lng: <?php echo $longtitude ?>
    });

    $("#map-<?php echo $branch->ID ?>-content").dialog({
        autoOpen: false,
        zoom: 12,
        width: 'auto'
    });

    $("#opener-<?php echo $branch->ID ?>").click(function (e) {
        e.preventDefault();
        map.refresh();
        $("#map-<?php echo $branch->ID ?>-content").dialog("open");
    });


    <?php endif; ?>

Answer 1

一旦设置了 html 元素的高度和宽度，就运行它。

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

取自此页面.. Gmaps API v3在事件下，它说这个......

Developers should trigger this event on the map when the div changes size: google.maps.event.trigger(map, 'resize') .

或者试试这个..

Size()

这个页面看起来很有帮助......

GMAPS API V3 Github.io

您是否尝试在创建 map 对象时设置其高度和宽度？

    // google map
    var map = new GMaps({
        div: '#map-<?php echo $branch->ID ?>-content',
        lat: <?php echo $latitude ?>,
        lng: <?php echo $longtitude ?>,
        width: 500,
        height: 500
    });

或者设置内联样式来设置模态标题 div 的宽度？

<div style="width: 500px;" class="modal-header">