maps displayed wrong on mobile (using JQuery mobile)

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开发者_StackOverflow.Map(div, options);

    return map;
}

Can you help me?

Thank you!!

---

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');
});

---

The solution is to trigger the resize event OR not to use Ajax. Phill has guided you to an example how it's done with the jQuery Mobile Google maps plugin which uses Ajax (and calls $('#map_canvas').gmap('refresh'); on pageload. The plugin is very easy to use (especially if you already know Google maps syntax).