0

I am working in a project to provide a map to mobile phone. For now I am trying on a iPhone.

It works fine, and when I load my first page I can see a map with my position, and the market is refreshed each 10 sec and move to my next position.

Some time when I change of page and I come back to the first page, the map is not full displayed. If I move the map, it move but some image of the map is still not displayed.

Also I am working with jquery mobe.

I also noticed that each time I return to the first map, the map is reloaded.

Is there a way to load the map once? So how can i check that my map is already loaded?

Here is my code

$('#home').live('pagebeforeshow', function(e){

    // Resize #mapHome (#mapHome = Sreen hight - footer - header)
    $('#mapHome').css('height', Resize.content()-2 +'px');

        // extract les id des modules existants
        navigator.geolocation.getCurrentPosition(function(position){

            showMap('mapHome',position.coords.latitude, position.coords.longitude);
            //console.log(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){
            console.log('WatchPosition called');
            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(lat, long);

        },
        // Error
        showError,
        { 
            frequency: 1000

        });

})

I just changed that line to

$('#home').live('pageshow', function(e){... code...}

And it semas to be better but I am not sure-

Here is the code of my function showMap()

function showMap(canvas,lat,long){
            var latLng = new google.maps.LatLng(lat,long);
            // Google Map options       var myOptions = {
          zoom: 19,
          //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 is the code addMarker()

function addMarker(lat, long){

        Tracking.mapBounds = new google.maps.LatLngBounds();

        // Clean previous markers
        for (var i = 0; i < Tracking.markers.length; i++ ) {
            Tracking.markers[i].setMap(null);       
        }         

        // Add the owner's marker
        var latitudeAndLongitude = new google.maps.LatLng(lat, long);
        var image = "img/iconGoogleMap/phones.png";
        marker = new google.maps.Marker({
            title   : 'me',
            //animation: google.maps.Animation.DROP, //BOUNCE
            position: latitudeAndLongitude,
            map     : Tracking.mapy,
            icon : image
        });
        Tracking.markers.push(marker);
        //Tracking.markers.push(marker);
        //console.log(localStorage.getItem('mapToDisplay'));

        /*  ADDING MODULES MAKERS */
        // Store the ID of available module.
        modulesJSON = Modules.get('bipme');

        for (var i = 0; i < modulesJSON['modules'].length; i++) {

            console.log('module id = ' +modulesJSON['modules'][i].id);
            console.log('Module ' + modulesJSON['modules'][i].id + ' position : ' + ModulesPos.module(modulesJSON['modules'][i].id));

            nlatLong = ModulesPos.module(modulesJSON['modules'][i].id).split(",");
            var LatitudeAndLongitudeModules = new google.maps.LatLng(nlatLong[0],nlatLong[1]);
            var image = "img/iconGoogleMap/" + modulesJSON['modules'][i].profile + "-" + modulesJSON['modules'][i].iconColor + ".png";

            marker = new google.maps.Marker({
            title   : modulesJSON['modules'][i].pseudo,
            //animation: google.maps.Animation.DROP, //BOUNCE
            position: LatitudeAndLongitudeModules,
            map     : Tracking.mapy,
            icon : image
            });

            Tracking.mapBounds.extend(LatitudeAndLongitudeModules);
            Tracking.markers.push(marker);

        };

By the way, is there a way to create a button, from which I can manually refresh the map?

j0k
  • 22,600
  • 28
  • 79
  • 90
pierrot10
  • 129
  • 4
  • 13
  • please show some html so we can see how the map is loaded in the first place – Popnoodles Dec 23 '12 at 19:19
  • Hello, thank for your answer. here us some code. [CODE] $('#home').live('pagebeforeshow', function(e){ $('#mapHome').css('height', Resize.content()-0 +'px'); navigator.geolocation.getCurrentPosition(function(position){ showMap('mapHome',position.coords.latitude, position.coords.longitude); //console.log('current position : ' + position.coords.latitude +','+ position.coords.longitude); }, function(){ //error }, { enableHighAccuracy : true, maximumAge : 30000 }); }) [/code] – pierrot10 Dec 23 '12 at 21:37
  • I am sorry, I am new by stackoveflow, I have not find an easy way to provide nice formated code. I hope you will understand. In my previous answer, there is code which is called when my first page is loaded (#home) – pierrot10 Dec 23 '12 at 21:43
  • edit your question, paste it in, select it, press CODE in the editor menu – Popnoodles Dec 23 '12 at 21:50

0 Answers0