Question

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

enter image description here

我正在使用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 在事件中，它说这......

当div更改时，开发人员应在地图上触发此事件尺寸：google.maps.event.trigger（地图，＆＃39;调整大小＆＃39;）。

或者也许试试这个..

Size()

此页面似乎非常有用......

GMAPS API V3 Github.io

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

    // 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">

带有gmaps.js的Jquery对话框

1 个答案: