Preserving Google Maps between page loads in jQuery Mobile

Question

I'm developing a jQuery Mobile app which really relie on Google Maps. Although I tried over and over, it seems I cant deal with page transitions and map persistence.

I'm really commited to do that and the way I have it working is like some kind of dirty workaround that I don't like at all.

I have this function that runs on pageShow for the map page:

initMap : function (){
    if (!Mapper.map || !$('#canvasMapa div').length){ // Or has been removed weirdessly
        var mapOptions = {
            zoom : 13,
            center: new google.maps.LatLng (37.38264, -5.996295), 
            mapTypeId: google.maps.MapTypeId.ROADMAP,
            disableDefaultUI: true // Disabling buttons and stuff
        };
        // We create a new one
        Mapper.map = new google.maps.Map(document.getElementById('canvasMapa'),mapOptions);
        if (Mapper.localStorage && !Mapper.favsLoaded)
            Mapper.loadFavorites();
        if (Mapper.markers.length)
            Mapper.recolocateMarkers();
    }
    else {
        console.log(Mapper.map);
        Mapper.map.fitBounds(Mapper.mapBounds);
    }


    $('#mapa').die('pageshow');
}

And that's it. It works. The first if check if the map has been initialized and also if it has lost the inside divs, that happens from time to time but it reloads the map. When the map is loading it checks if there were any markers in the app so it can be reallocated in the new map.

This works loading dialogs within the same page. As much as you want.

Then it comes the navigation of the app. Whenever you go to another page, strange things start to happen. This is the error I see on the console when change to page and the come back to the map.

However, the map is still working:

Uncaught TypeError: Cannot call method 'getSouthWest' of undefined
c
I.fitBounds
I.fitBounds%7Bmain,geometry%7D.js:38
S%7Bmain,geometry%7D.js:24
I.fitBounds%7Bmain,geometry%7D.js:38
BuSeViCi.initMapapp.js:78
f.event.dispatchjquery-1.7.1.min.js:3
f.event.add.h.handle.ijquery-1.7.1.min.js:3
f.event.triggerjquery-1.7.1.min.js:3
f.fn.extend.triggerjquery-1.7.1.min.js:3
e.extend.eachjquery-1.7.1.min.js:2
e.fn.e.eachjquery-1.7.1.min.js:2
f.fn.extend.triggerjquery-1.7.1.min.js:3
a.Widget._triggerjquery.mobile.min.js:17
(anonymous function)jquery.mobile.min.js:43
f.Callbacks.njquery-1.7.1.min.js:2
f.Callbacks.o.fireWithjquery-1.7.1.min.js:2
f.Callbacks.o.firejquery-1.7.1.min.js:2
wjquery.mobile.min.js:41
f.fn.extend.on.ejquery-1.7.1.min.js:3
f.event.dispatchjquery-1.7.1.min.js:3
f.event.add.h.handle.ijquery-1.7.1.min.js:3

The line pointing to the app.js is the one that says: Mapper.map.fitBounds(Mapper.mapBounds);

The only workaround I made is to clear the Mapper.map variable whenever I navigate to another page. That sounds really dirty as I said and I would like to check the object which is undefined to recover the map because it's working and logging the object shows me a Google Maps object.

I strictly want to avoid using rel="external" because this breaks apps. You can't install it in Home page nor make PhoneGaps apps with those attributes so... what do you think about it?

Answer 1

The error means that Mapper.mapBounds is null, but there's not really enough information here to determine why that is.