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:
- // 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
});
}) - // 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:
- 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
- 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