Geek Answers Handbook

Maps do not display correctly on mobile devices (using jQuery mobile)

I am using jQuery mobile and I have to display some maps. I use a function that creates maps every time I click on a specific link, but after generating the first map, others are not displayed correctly.

Here is an example, First map:

First map

Other cards:

Second map

I use this function:

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?

Thanks!

+4
source share
2 answers

The problem is solved, you need to create a map on the "pagehow" event (jQuery mobile event):

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

The solution should raise a resize event or not use Ajax. Phill gave you an example of how this is done with the jQuery Mobile Google Maps plugin that uses Ajax (and calls $ ('# map_canvas'). Gmap ('refresh') on pageload. The plugin is very easy to use (especially if you already know the syntax of google maps).

+1
source

More articles:


All Articles