Question

I’m using jQuery mobile and I have to display some maps.
I’m using a function that create maps every time that I click on the specific link but after the generation of the first map, the others are displayed wrong.

Here an example,
First map:

Other maps:

I use a function like this:

function buildMap(div){

    var coord = new google.maps.LatLng(lat, lng);

    var options = {
        zoom: 13,
        scrollwheel: false,
        scaleControl: true,
        mapTypeControl: false,
        center: coord,
        mapTypeId: google.maps.MapTypeId.HYBRID
    };

    var map = new google.maps.Map(div, options);

    return map;
}

Can you help me?

Thank you!!

Answer 1

Problem solved, you need to create the map on the “pageshow” event (an event of jQuery mobile):

$('#map_page').live('pageshow',function(event, ui){
    buildResultMap('#map_canvas');
});