title: refresh google map javascript ajax
body: <p>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:</p>
  
  <ol>
  <li><p>In app1(the one that is moving), I need to refresh the marker every 10 seconds on the map, without loading the whole page.</p></li>
  <li><p>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.</p></li>
  </ol>
  
  <p>This is how I am loading the map in each app:</p>
  
  <pre><code>  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);
  }
  </code></pre>
  
  <p>And I am getting the location of the other app with an ajax POST:</p>
  
  <pre><code>$.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);
     }
   });
  </code></pre>
  
  <p>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:</p>
  
  <pre><code>http://maps.googleapis.com/maps/api/js?sensor=false 
  </code></pre>
  
  <p>SOLVED IT:
  The answer is to split the code in different functions and call only the marker, in order to update it:</p>
  
  <pre><code>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);
  }
  </code></pre>