How can I check if googlemap is not reload or is already loaded

How can I check if googlemap is not reload or is already loaded

Dear all,
I have a juquerymobile built for iPhone and I would like to make it working on other smartphone is Android.
It has several page and on the first (#home) google map is loaded:
  1. // When I visit the #home page

    $('#home').live('pagebeforeshow', function(e){
       
        // Resize #mapHome (#mapHome = Sreen hight - footer - header)
        $('#mapHome').css('height', Resize.content()-0 +'px');
         // Start tracking the Use
           
            // extract les id des modules existants
            navigator.geolocation.getCurrentPosition(function(position){
       
                showMap('mapHome',position.coords.latitude, position.coords.longitude);
           
            },
            function(){
                //error
            },
            {
               
                    enableHighAccuracy    : true,
                    maximumAge            : 30000
                    //maximumAge:Infinity
            });
           
            // Place and move the marker regarding to my position and deplacement
            var track_id = "me";
            Tracking.watch_id = navigator.geolocation.watchPosition(
            // Success
            function(position){
       
                var lat = position.coords.latitude;
                var long = position.coords.longitude;
               
                var latLng = new Array();
                latLng[0] = lat;
                latLng[1] = long;
               
                //Tracking.myCoordinates.push(lat,long);
                Tracking.myCoordinates.push(latLng);
                addMarker('me',lat, long);
           
            },
            // Error
            showError,
            {
                frequency: 10000

            });
       
    })
















































  2. // When I leave the page

    $('#home').live("pagebeforehide", function() {
        track_id = "me";

        // Stop tracking the user
        navigator.geolocation.clearWatch(Tracking.watch_id);
       
        // Save the tracking data
        window.localStorage.setItem(track_id, JSON.stringify(Tracking.myCoordinates));

        // Reset watch_id and tracking_data
        Tracking.watch_id = null;
        Tracking.myCoordinates = new Array();
       
    });














Here is the function showMap:
  1. function showMap(canvas,lat,long){
       
            var latLng = new google.maps.LatLng(lat,long);
       
            // Google Map options
            var myOptions = {
              zoom: 25,
              zoomControl    : 1,
              center: latLng,
              mapTypeId: google.maps.MapTypeId.ROADMAP////ROADMAP, SATELLITE, HYBRID and TERRAIN
            };       

            // Create the Google Map, set options
            Tracking.mapy = new google.maps.Map(document.getElementById(canvas), myOptions);

    }
















And here the function addMarker
  1. function addMarker(quelModule, lat, long){
           
            //console.log(localStorage.getItem('mapToDisplay'));
           // ModulesPos.module('47');
         
            var mapBounds = new google.maps.LatLngBounds();
           
            var latitudeAndLongitude = new google.maps.LatLng(lat, long);
    // Add a personal icon       
    var image = "img/iconGoogleMap/phones.png";
       
                // Clean previous markers     
            for (var i = 0; i < Tracking.markers.length; i++ ) {
               
                Tracking.markers[i].setMap(null);
                   
              }

            marker = new google.maps.Marker({
                title    : 'me',
                //animation: google.maps.Animation.DROP, //BOUNCE
                position: latitudeAndLongitude,
                map        : Tracking.mapy,
                icon : image
            });
           
            Tracking.markers.push(marker);
           
            mapBounds.extend(latitudeAndLongitude);
            Tracking.mapy.fitBounds(mapBounds);
    }






























When I visit the #home page, the map is corretely shown in #home. But for a unknow reason, when I change of page and I come back to #home, the map is not fully shown. It like if the picture of the page is not loaded (it's grey).


I observed that when the map is not correctely loaded, as in the picture, the mode choose is at you can see in red circle. When the map iscorretely load, beside of "Satellite" or can also see "Plan".

I also noticed that when I return to #home, the map is reload.

First I would like to know if you can tell me how can do to load the map if it's not already loaded? In other words, to load the map only once, even if I change of pages.

How can I code a refresh button, like F5 on a browser, to simply reload the map "manualy"

Do you have any idea, why the map is not fully shown, as it's displayed in the picture?

Is there a possibility to cache the map, and making sure it's not reloaded?

Thank for your help and any suggestion to perfect my code is welcome.

Cheers and happy christmas