Take value that would go to the ID and put in another location and save in the database

Question

I wish to MONITOR the user’s movement from the Android APP, which will be configured with the link from my dashboard.

I have the following code:

---------------------------------------------------------------------

    var geocoder;
var map;
var marker;

//PARTE PRINCIPAL
  function initialize() {
    var latlng = new google.maps.LatLng(-18.8800397, -47.05878999999999);
    var options = {
        zoom: 5,
        center: latlng,
        mapTypeId: google.maps.MapTypeId.ROADMAP
    };

    map = new google.maps.Map(document.getElementById("mapa"), options);

    geocoder = new google.maps.Geocoder();

    marker = new google.maps.Marker({
        map: map,
        draggable: true,
    });

    marker.setPosition(latlng);
}





//PARTE 000001
if(navigator.geolocation) {
    navigator.geolocation.getCurrentPosition(function(position){ // callback de sucesso
        // ajusta a posição do marker para a localização do usuário
        marker.setPosition(new google.maps.LatLng(position.coords.latitude, position.coords.longitude));
    }, 
    
    function(error){ // callback de erro
       alert('Para um melhor desempenho nas entregas, ative a sua localização!');
       console.log('Erro ao obter localização.', error);
    });
} else {
    console.log('Navegador não suporta Geolocalização!');
}
//**************************
//**************************




//PARTE 00002
window.onload = function() {
  var startPos;
  var geoOptions = {
  timeout: 10 * 1000,
  maximumAge: 5 * 60 * 1000
  }

  var geoSuccess = function(position) {
    startPos = position;
    document.getElementById('startLat').innerHTML = startPos.coords.latitude;
    document.getElementById('startLon').innerHTML = startPos.coords.longitude;
  };
  
 
  navigator.geolocation.getCurrentPosition(geoSuccess, geoError, geoOptions);
};





//PARTE 00003
//ATUALIZAR NO BANCO DE DADOS           
function Atualiza_Posicao(){

$.ajax({
    data: {"lat": + POSICAO-LAT-AQUI, "lng": + POSICAO-LNG-AQUI},
        type:'POST',        
        dataType: 'json',
        url:"atualizar-posicao.php"});
        //******************
    

}




//atualiza o mapa a cada segundo predefinido 
function foo() {
    //Colocar as funções aqui
    Atualiza_Posicao();
    
}
setInterval(foo, 4000);  

//****************************************************
  
---------------------------------------------------------------------

In the "/PART 00002" of the code there is this:

document.getElementById('startLat').innerHTML = startPos.coords.latitude;
    document.getElementById('startLon').innerHTML = startPos.coords.longitude;

Instead of showing the result of this in the DIV, I want to save in the database LATITUDE and LONGITUDE, but I’m not getting.

In this case, the result would be played for "/PART 00003", more precisely in "POSITION-LAT-HERE" and "POSITION-LNG-HERE"

    //ATUALIZAR NO BANCO DE DADOS           
    function Atualiza_Posicao(){

    $.ajax({
        data: {"lat": + POSICAO-LAT-AQUI, "lng": + POSICAO-LNG-AQUI},
            type:'POST',        
            dataType: 'json',
            url:"atualizar-posicao.php"});
            //******************
        

    }

Answer 1

If I understand correctly, you need to send the data that is in the fields mentioned in the request:

data: { lat: POSICAO-LAT-AQUI, lng: POSICAO-LNG-AQUI }

You can redeem the values you want after you have entered them at some previous point in your stream like localStorage, sessionStorage, variable where some code points have common access, some field hidden on the page etc. Just as an example, we can do this in your function geoSuccess (which if understood correctly, is the point where we have the desired data) using sessionStorage:

  var geoSuccess = function(position) {
    startPos = position;
    sessionStorage.setItem('startLat', startPos.coords.latitude);
    sessionStorage.setItem('startLon', startPos.coords.longitude);
  };

And redeem before sending:

var startLat = sessionStorage.getItem('startLat');

var startLon = sessionStorage.getItem('startLon');

At the end of the flow, we would have the object below:

data: { lat: startLat, lng: startLon }

You can also redeem the data of the elements you previously populated and use them during sending:

var startLat = document.getElementById("startLat").textContent

vat startLon = document.getElementById("startLon").textContent

Remember that sessionStorage (if use) will keep the data in the current session, so if you need updated data from the same session, overwrite the previous values to not have old data being sent or clear them at some point.

I hope I’ve helped in some way.