Search jQuery

jQuery Forum

Persisting google maps as a toolbar

in jQuery Mobile • 10 years ago

I am developing an application where the background for all the screens is a google map.

I have been able to overlay my UI on top of the google map for the first screen with no issues, but i haven't found a way to be able to persist the map div over from data-role="page" to data-role="page"; Whilst i can live with reloading the map on every screen, it would heavily impact my bandwidth consumption and my app's user experience as a whole.

I tried assigning the same ID to all the div's hosting the map to no avail.

Any ideas?

Replies(3)

watusiware

Re: Persisting google maps as a toolbar

10 years ago

Remove the map from the old page and insert it into the new page. Look at jQuery detach().

machinari..

Re: Persisting google maps as a toolbar

10 years ago

That doesn't seem to do the trick.

var map = $("map_canvas").detach();

$.mobile.changePage("#mapPage");

$('#mapPage').append(map);

machinari..

Re: Re: Persisting google maps as a toolbar

10 years ago

$('#mapPage').append($('#map_canvas'));

$.mobile.changePage("#mapPage");

This seems to work, as soon as i change of page i can see the map but then it gets overlaid with a white layer, any ideas on how to remove said layer? I am already using the theme-less JQM CSS file.

To be more precise, the map suddenly has it's height set to 0;

Top Reply

Response title

Attachments

jQuery Forum

Persisting google maps as a toolbar

Replies(3)

Re: Persisting google maps as a toolbar

Re: Persisting google maps as a toolbar

Re: Re: Persisting google maps as a toolbar

Statistics

Tags

Actions