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

    return map;
}

Can you help me?

Thank you!!

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

回答2:

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).

来源：https://stackoverflow.com/questions/7089882/maps-displayed-wrong-on-mobile-using-jquery-mobile