jQuery - Googlemap in JQ Dialog displays part of a map

Question

I am using a jQuery dialog to display google maps but when the event is called to load the dialog it sometimes displays part of the map, other times it will show the full map as expected.

It will show as follows:-

Here is the code:-

<script>
function initialize()
{
var mapProp = {
  center:new google.maps.LatLng(52.781059,-1.211027),
  disableDefaultUI: true,
  zoom:16,
  mapTypeId:google.maps.MapTypeId.ROADMAP
  };
var map=new google.maps.Map(document.getElementById("map-canvas")
  ,mapProp);
}

google.maps.event.addDomListener(window, 'load', initialize);
</script>

---

$('body').keyup(function (e) {
    if (e.keyCode == 77 && $("#booking-docket").dialog("isOpen") === false) {
    $("#google-map").dialog('open');
    }
});

$("#google-map").dialog({ autoOpen: false, resizable: false, draggable: true, show: { effect: 'drop', direction: "left" }, hide: 'slide', position: "right top", height: 300, width: 500, resizeStop: function (event, ui) { google.maps.event.trigger(map, 'resize') },
    open: function (event, ui) { google.maps.event.trigger(map, 'resize'); } }) 

    setTimeout( initialize(),1200);
    //setTimeout(google.maps.event.trigger(map, 'resize'),6200);

$("#google-map").parent().find(".ui-dialog-titlebar").hide();

I have looked everywhere for a fix but can't find anything that has worked. I have tried:-

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

and have tried adding the following to the dialog open event:-

resizeStop: function (event, ui) { google.maps.event.trigger(map, 'resize') },

but none of the above is working.

Any suggestions?

Answer 1

As suggested in my comment, you're better off creating the map inside the dialog. Still needs refining regarding the size of the canvas (needs to factor in the scroll bars of the dialog), but you get the idea.

jsfiddle

HTML:

<div id="dialog">
    <div id="map-canvas"></div>
</div>

JS:

var map;

function initialize() 
{
    var mapOptions = 
    {
        center: new google.maps.LatLng(40.729884, -73.990988),
        zoom: 18,
        mapTypeId: google.maps.MapTypeId.ROADMAP,
        streetViewControl: false
    };
    map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
}

$("#dialog").dialog(
{ 
    resizable: true, 
    draggable: true, 
    show: { effect: 'drop', direction: "left" }, 
    hide: 'slide', position: "right top", height: 300, width: 500, 
    resizeStop: function (event, ui) 
    { 
        $("#map-canvas").css({height:ui.size.height, width : ui.size.width});
        google.maps.event.trigger(map, 'resize') 
    },

    open: function (event, ui) 
    { 
        $("#map-canvas").css({height:300, width : 500});
        initialize(); 
    } 
});