Hi,I've a problem regarding Google Maps inside jQuery Mobile. I went through the forum and found out 3 similar kind of questions. However, mine is little different. The map is not complete. I'm attaching a screen-shot here. Please let me know, how can I show Google Map inside a 'page'.

First of all thanks for your "solution", but i don't understand why this works. I assume its a bug from jquery mobile right ?

Could you please explain why this is needed ? This is insane, i mean i never know which is the previous page which links to my page containing a map. I mean i can got through all my pages and check where there's a link for that particular page, but that's not good programming.

I'm asking because if there's an issue we should report it on github so they can solve it...

Btw, in my implementation i'm just putting the link to gmaps in the "first" page any other code can be in the page containing the map. But i still need to do more testing...

Hi,I modified my code to implement login functionality. index.html (with menu and link to map.html) loads first. It checks jStorage for login details. If not found it loads login.html [using $(window).attr('location', 'login.html');] Once login is done and user is authenticated, values are stores in jStorage and user goes to index.html again, using the same attr functionality.However, when I navigate from index to map file, the map doesn't look good and whole UI is changed. There is no header with title. Whereas, header contains some part of map. Please find below attached UI screen-shot for more details.I'm using the same above code, which worked previously. Thanks.

This is extremely confusing to troubleshoot...I've been doing basic things with jQuery (Ajax and UI features) for a little over a year but am new to jQ mobile.

Any suggestions? I'm behind on this proof-of-concept project I'm working on and the map feature is essential...

UPDATE: it works on my local development machine...but not on the server. I'm using Codeigniter for routing and multi-language capabilities, not sure if that has anything to do with it. Any suggestions on where to start looking for problems?

thanks for posting this, I was wondering if someone could help as I've I created two files index.html and map.html and pasted in the code exactly as above. When I ran up the application it asked my permission to gain my current location to which I said yes. When I click on Map, it navigates to the map.html page but I get a blank canvas. Any ideas?

First, if you want to manipulate a page after the page has been initialize, it has to be wrapped in a pagecreate event handler: (see events page in demos and docs). When you add a map, it is occurring after the page has been initialized.

The second issue, which was the map taking up the full screen has to do with the fact that you cannot set a child element to a relative height and width unless the parent is also relative. So that is why each element is set to a relative height and width.

The info above was really handy, many thanks. I can now load a map whereby you get the users current location as per example above.

Does anyone know how we can show the users current location, and then a location of a fixed known address.The use case would be where we have a marker showing a location of a store(place), and the users location in relation to the store. The nice to have would be showing directions from users current location.

I know this is more one for google maps api, however location is a key part of mobile sites, and it would be great to have this all tied up within the great stuff we can do with jQuery.

I have tried the code above but I am still having some issues. I hope one of you can help. In my case, I have a list of buildings, so potentially someone will select and building, view its location on a google map and then click "back" and select another building.The first time they select a building, everything works fine, but when they click back and select the second building, the map does not show (until I hit refresh which is not ideal). I have a pagecreate and pageshow event binding, but still no luck. Here is my code;

Has anyone managed to solve the issue of the map page loading a blank screen on second load?

i.e. I have a list of locations which pass in lat and lng to the map detail page when clicked. the first location clicked will always render properly, but when you go back to the list and click a second one, it will only show a blank screen.

I have seen a few other people on the forum with this issue but no solutions yet. This has been driving me nuts for a few days now.

I finally managed to get this working after a lot of banging my head on the desk. Basically, you need the div of the page holding the map and the div of the map_canvas itself to have unique names. Here's my code (it's coldfusion but obviously you could do the same with php, asp, etc):

I am experiencing a blank map. From the map page when I push the back button on my android phone the map briefly flashes. I tried using different ids for the map canvas div and page containing the map, but no luck.

The answer given by elroyjetson is OK with jquery.mobile-1.0a1.min and jquery.mobile-1.0a1.min.css but with "newest" version (jquery.mobile-1.0b3.min and jquery.mobile-1.0b3.min.cs)s, the map doesn't appear.

Maybe a problem with the "height:100% and width:100%" on each previous div...

Also as far as I know.. GoogleMap API is separate library.. if its not working check your code on how you display the map, display the markers, etc.. JQM is just a container for it.. Google maps will work without JQM =)..

So far.. I've done getting nearby places with given radius without problem in displaying it =)...

my code was meant for those who have problems with rendering a full screen map.

Such like jQuery mobiles own example: http://jquerymobile.com/test/experiments/google-maps/map.html, the Google maps app and many more map based native and web apps for mobile and desktop devices.When you see the map in full screen with height value set in % then you get the same experience on different sized and oriented screens, thus taking advantage of the devices full ability. The look of a map with 350px height on for example an iPad is a whole different experience then of one where height is set to 100%.

I found the height of my screen and subtracted the height of my footer and header, and set the map to this height. I then added a setTimout real short just to give the div time tor resize and seems to work:

Just a quick thanks - I found this really useful. Having tried I don't know how many methods setting the time out to refresh the map was just what I needed. I have not idea why this is needed but it does seem a common problem.

BTW The added benifit of the height and width setting also helps as oddly I could set the width using %% but not the height.... for that I had to use px.... strange.

T

EDIT: This may be a given but I'm learning my self.... if you use this solution make sure you have 'map' and other google items set as global or odd things happen with the screen and any markers....

I just recently finished a practice App (I wanted to learn more about the GPS and compass) that calls Google Maps and places the map in the middle of the compass dial. I blogged a little bit about it earlier today, perhaps it will help you.

I tried the "pageshow' mentioned by mokesmokes. While it succeeded in showing the whole page in a desktop browser, it also introduced another problem to solve: it overwrites my customized map when that map is displayed by a user selecting a map marker from a location list.

Here's the pageshow function:

$('#map').live('pageshow',function(event){

loadMap(34.700817, -86.742943);

});

And here’s the beginning of the non-global function which creates the map and its markers:

function loadMap(Lat, Long){

var latlng = new google.maps.LatLng(34.7233, -86.7348);

var MY_MAPTYPE_ID = "Map";

Can someone suggestion how to integrate the pageshow with the map I've created with the loadMap function?

I succesfully made it work based on another example I found on the internet. I am using jQuery 1.7.1 and jQuery mobile 1.1.1. It is tested on iphone4s, android browser and on the desktop(explorer, firefox, chrome, opera). If you want the source code write me at: bboydflo [at] gmail [dot] com. actually you can get it there. the link of the app is florin-cosmin.dk/mobile/foodjs/index.html

(But I wouldn't be using 1.9.1 as you are. Latest version with compatibility for all browsers is 1.11.1.)

Google Maps has been solved several times in this forum. Search it. I recommend using jquery.ui.map plugin, which, although a jQuery UI plugin, is one of the few specifically designed to also work with jQuery Mobile.. You'll like find some help on using it with jQuery Mobile on it's support site.

I'd recommend removing unnecessary scripts while debugging. You've got scripts here that aren't needed to test maps, and as well, you have duplicated the same scripts more than once.