jQuery Mobile Map在Dialog Sized Strange中打开

Question

我在这里创建了一个非常简单的编解码器：

http://codepen.io/aherrick/pen/cFLiB

你可以看到，当对话框打开时，它不会在我的标记上居中并产生一个奇怪的灰色区域。

我没有正确初始化地图吗？如果单击“打开地图”链接并在运行中构建它，我只想初始化地图资源。

HTML

    <div data-role="page" id="main">


        <div role="main">


          <a href="#map">Open Map</a>


        </div>

    </div>

  <div data-role="dialog" id="map" data-close-btn="right">

        <div data-role="header">
            <h4>Map</h4>
        </div>
        <div data-role="content">
            <div>
                <div id="map-canvas"></div>
            </div>
        </div>
    </div>

JS

 var latlng = new google.maps.LatLng(36, -80);
    var map = new google.maps.Map(document.getElementById('map-canvas'), {
        zoom: 10,
        center: latlng,
        mapTypeId: google.maps.MapTypeId.ROADMAP
    });

// Add an overlay to the map of current lat/lng
var marker = new google.maps.Marker({
    position: latlng,
    map: map,
    title: "Greetings!"
});



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