CODEWITHSUNDEEP
google-mapsjquery-mobile
Mark Design
Mark Design

Reputation: 664

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:

First Map

Other maps:

Second Map

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!!

Upvotes: 4

Views: 1448

Answers (2)

Mark Design
Mark Design

Reputation: 664

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

Upvotes: 3

johansalllarsson
johansalllarsson

Reputation: 927

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

Upvotes: 1

Related Questions