问如何在jQuery对话框中集成OpenLayers映射？

EN

// create map container (id=map) and append to document body
var div = $('<div />')
            .attr('id', 'map').
            css({width:400,height:400})
            .appendTo($('body'));

//start a simple map, code from on http://openlayers.org/dev/examples/osm.html
map = new OpenLayers.Map( 'map');
layer = new OpenLayers.Layer.OSM( "Simple OSM Map");
map.addLayer(layer);
map.setCenter(
    new OpenLayers.LonLat(-71.147, 42.472).transform(
        new OpenLayers.Projection("EPSG:4326"),
        map.getProjectionObject()
        ), 12
    );

// initialize the jQueryUI Dialog
div.dialog({
    width:800,
    height:600,
    title: 'My Map',
    resizeStop: function(){
        map.updateSize(); //to prevent drag-zoom error
    },
    dragStop: function(){
        map.updateSize(); //to prevent drag-zoom error
    });