Center and enlarge google maps - google-maps

Question

This is the code:
#map_canvas {
height: 1000px;
text-align: center;
}
<div dojoType="dojox.mobile.ContentPane" style="overflow: auto;">
<div id="map_canvas"></div>
<!-- cambiare style -->
</div>
I tried to center with various css attributi but don't works.How i center and enlarge all map in panel?

Answer 1

You have to resize your map.
Try this
var mapOptions = {
center: new google.maps.LatLng(43.653226, -79.3831843),
zoom: 14,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
$('#map-canvas').fadeIn('slow', function() {
google.maps.event.trigger(map, 'resize');
}

Answer 2

Anish's code is working for me. (minor fix: map-canvas -> map_canvas) The map fills the width of the page and is 1000px high.
Looking at the screenshot, your map is filling the width of the window. You can tell this because the map control is all the way to the right of the screen in the upper corner. But for some reason, the map isn't fetching the tiles that it needs to fill itself. This usually happens when the map container is resized without triggering the google map resize event. Are you creating the map before the dojo parser runs? I put Anish's code inside the ready() function in dojoInit() and the map fills the screen when it is shown.
Sizing google maps to fill available space (not using absolute height and width) is tricky, but usually the problem is the height, not the width. I've written a series of blog post on google maps in worklight here: http://www.ibm.com/developerworks/community/blogs/dhuyvett