refresh google map javascript ajax

Question

I am doing two html5/javascript apps with phonegap for android, and I have them both communicating through php with ajax, in both of them I am using the google maps api, and I need to know in both of them where the other guy is, while one is moving and another is waiting for him, then I have 2 questions:

In app1(the one that is moving), I need to refresh the marker every 10 seconds on the map, without loading the whole page.
I am loading through ajax, the coordinates that are saved in the mysql database for both apps, so I need to set a second marker in each map, as the other apps location, and track it's movements every 10 seconds.

This is how I am loading the map in each app:

  function getPos() {
         navigator.geolocation.getCurrentPosition(onSuccess, onError, {enableHighAccuracy:true});
         setTimeout(getPos, 10000); //call function after 10 seconds
 }

 function onSuccess(position) {
    lat = position.coords.latitude;
    lon = position.coords.longitude;
    console.log("Found - LAT: ", lat, "LON: ", lon);

    var currentposition = new google.maps.LatLng(lat,lon);
    var mapoptions = {
        zoom: 16,
        center: currentposition,
        mapTypeId: google.maps.MapTypeId.ROADMAP,
        icon: image
    };
    var map = new google.maps.Map(document.getElementById("map"), mapoptions);
    var marker = new google.maps.Marker({
        position: currentposition,
        map: map
    });
    save_position_in_bd();
}

function onError(error) {
   console.log('code: '    + error.code, 'message: ' + error.message);
}

And I am getting the location of the other app with an ajax POST:

$.ajax({ 
   type: "POST", 
   url: "http://localhost/call.php", 
   data: "name=rui",
   dataType: 'json',
   success: function(data){
     lat = data.lat;//get other apps lat
     lon = data.lon;//get other apps lon
   },
   error: function(jqXHR, textStatus, errorThrown ){
         console.log("POST: ", jqXHR, textStatus, errorThrown);
   }
 });

What can I do to solve my problems? I have tried to refresh the map in different functions, and tried to load only the marker, but it doesn't work. Also the exact api I am using is:

http://maps.googleapis.com/maps/api/js?sensor=false

SOLVED IT: The answer is to split the code in different functions and call only the marker, in order to update it:

function getPos() {//initial function to read the position
         estado = "livre";
         navigator.geolocation.getCurrentPosition(onSuccess, onError, {enableHighAccuracy:true});
         setTimeout(keep_alive, 10000); //read every 10 seconds
 }

 function onSuccess(position) {//read map and mark it in the map
    lat = position.coords.latitude;
    lon = position.coords.longitude;
    console.log("Found - LAT: ", lat, "LON: ", lon);

    var image = '/img/taxi_green.png';
    var mapoptions = {
        zoom: 16,
        center: new google.maps.LatLng(lat,lon),
        mapTypeId: google.maps.MapTypeId.ROADMAP,
        icon: image
    };
    map = new google.maps.Map(document.getElementById("map"), mapoptions);
    marker = new google.maps.Marker({
        position: new google.maps.LatLng(lat,lon),
        map: map
    });
    save_position();
}

function keep_alive() {//read position and mark it in the map
   navigator.geolocation.getCurrentPosition(onRefresh, onError, {enableHighAccuracy:true});
   save_position();
   setTimeout(keep_alive, 10000); //read every 10 seconds   
}

//refresh only the marker
function onRefresh(position) {
   lat = position.coords.latitude;
   lon = position.coords.longitude;

   console.log("Found - LAT: ", lat, "LON: ", lon);

   marker.setPosition(new google.maps.LatLng(lat, lon));//refresh marker
   map.setCenter(new google.maps.LatLng(lat, lon));//resfresh center of the map
}

function trace_client() {//mark clients position in the map
   //clientMarker.setPosition(new google.maps.LatLng(client_lat, client_lon));
   clientMarker = new google.maps.Marker({
        position: new google.maps.LatLng(client_lat,client_lon),
        map: map
    });
   console.log("client marked in the map");
}

function onError(error) {
   console.log('code: '    + error.code, 'message: ' + error.message);
}

refresh google map javascript ajax

Answers (1)

Related Questions