带有gmaps.js的Jquery对话框

我面临一个在对话框中显示谷歌地图的问题，地图在对话框中显示如下

我正在使用库来显示谷歌地图和对话框

这是我的代码片段

<?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; ?>

,
液化天然气：
});
map.addMarker({
拉丁语：，
液化天然气：
});
$（“#映射--内容”）。对话框({
自动打开：错误，
缩放：12，
宽度：“自动”
});
$（“#开场白-”）。单击（函数（e）{
e、 预防默认值（）；
map.refresh（）；
$（“#映射--内容”）。对话框（“打开”）；
});

设置html元素的高度和宽度后，在其上运行此命令

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

摘自本页。。 在事件中，它说

当div更改时，开发人员应该在映射上触发此事件 大小：google.maps.event.trigger（映射“resize”）

或者试试这个

这个页面似乎很有帮助

创建地图对象时，是否尝试过设置其高度和宽度

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

//谷歌地图
var map=新GMAP({
div:“#映射--内容”，
拉丁语：，
液化天然气：，
宽度：500，
身高：500
});

或者设置内联样式以设置模式标题div的宽度

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

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