Question

I am writing a jquery mobile app which needs a map.

For the map I am planning to use Google maps service.

To account for orientation changes, I tried to use something like:

<script>
$('#page-map').live('pagecreate', function(event) {
    var map = $('#map_canvas').gmap({
        ...
    });
    ...
    $(window).resize(function() {
       $('#map_canvas').width($(window).width());
       $('#map_canvas').height($(window).height());
    });
)};
</script>

The problem: this code correctly resizes the map canvas when the device is rotated, but it looks like jquery mobile resize() is skipped (the url bar is visible, for example…).

Not even adding to the “resize(function() {” code something like this:

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

is of any help.

UPDATE:
The issue only happens on the only mobile device I’m testing my pages – a Samsung Galaxy Mini (GT-S5570), Android 2.3.4 (Gingerbread). It does not happen when resizing window on a desktop PC (i.e: on a desktop browser map_canvas is correctly filled when browser’s window is enlarged, even without the resize() binding, only due to width/height at 100% on map_canvas…)

Answer 1

I assign a size through css to my map in jquery mobile

I add the map_canvas inside div with dimencion deuin want in this case 100%

CSS

#map_content {
padding: 0px;
width: 100%;
height: 100%;
overflow: hidden;}


#map_canvas {
width: 100%;
height: 100%;
padding: 0;
text-shadow: none;}

HTML

         <div data-role="content" id="map_content" data-theme="a">
            <div id="map_content">
                <div id="map_canvas"></div>
            </div>
        </div>