Google maps in Jquery Tools Dialog

[Heidi Anselstetter]

Hi,

I have a strange problem:

When I load the map into the "normal" page, it opens perfectly.

When I use Jquery Tools Dialog, the map is not loading correctly.

I attached a screenshot of the map.

The center of the map, where the marker should show up, is where the red arrow points too.

All these happens only when I use the jquery modal stuff. Otherwise I can use the map without any problems.

Just the modal keeps me getting mad :-(

Has anyone an idea?

Has anyone a working solution to open the map in a modal dialog?

Please help me!!

Thanks!!

[Heidi Anselstetter]

This is my rendered code:

<div id="map_canvas" class="map" style="width: 100%;height: 400px;">Map cannot be displayed!</div><script type="text/javascript">

var matching = {};

var gIcons0 = {};

jQuery(function(){

var initialLocation = new google.maps.LatLng(39.578173362125, 2.6531982421875);

var browserSupportFlag = new Boolean();

var myOptions = {zoom: 9, streetViewControl: false, navigationControl: true, mapTypeControl: true, scaleControl: true, scrollwheel: false, keyboardShortcuts: true, center: initialLocation, mapTypeId: google.maps.MapTypeId.ROADMAP};

// deprecated

gMarkers0 = new Array();

gInfoWindows0 = new Array();

gWindowContents0 = new Array();

var map0 = new google.maps.Map(document.getElementById("map_canvas"), myOptions);

var x0 = new google.maps.Marker({position: new google.maps.LatLng(39.578173362125,2.6531982421875),map: map0});

gMarkers0.push(x0);

});

</script>

</div>

I just noticed something about a resize function?

Where do I have to add this?

[Rossko]

> I just noticed something about a resize function?
> Where do I have to add this?

After your jquery stuff does whatever it does to the map <div> -
resizes, un-hides etc.
There you call the map's resize method so that it can discover its new
home