Automatic update without refresh google maps

Question

I work with a vehicle tracking system, but it was not developed by me, I caught the project already underway.

I need that on my page where the whole tracking procedure is done as the current location of the vehicle, become automatic, today to have the last position of the vehicle I need to reload the page, I need something like setInterval() or something like this so that the script erases the last position and generates a new position to display it on the map, thus automatically updating the points where the vehicle is located.

Follow the code, ask friends a little patience with me, because the code is a little big:

<script type="text/javascript">

var interAutoReload;

function reprogReload(seconds){
    clearInterval(interAutoReload);
    interAutoReload = setInterval(autoReload, seconds);
}

var intervalTraceRoute;
var counterTrace = 0;
var markers;
var path;
var poly;
var lat_lng = [];
var latlngbounds = new google.maps.LatLngBounds();
var estadoIgnicao;   
var directionsDisplay;
var markerArray = [];
var markerArrayHist = [];
var marcadores = [];
/**
 * [directionsService Inicializa o servico de rotas]
 * @type {Google Object}
 */
var directionsService = new google.maps.DirectionsService();
/**
 * [icons Define os ícones personalizados das rotas]
 * @type {Google Object}
 */
var icons = {
  start: new google.maps.MarkerImage(
    'imagens/marker_start.png',  // URL
    new google.maps.Size( 48, 48 ), // (width,height)
    new google.maps.Point( 0, 0 ),  // The origin point (x,y)
    new google.maps.Point( 22, 32 ) // The anchor point (x,y)
  ),
  end: new google.maps.MarkerImage(
    'imagens/marker_finish.png',  // URL
    new google.maps.Size( 40, 40 ), // (width,height)
    new google.maps.Point( 0, 0 ),  // The origin point (x,y)
    new google.maps.Point( 22, 32 ) // The anchor point (x,y)
  )
}
/**
 * [var_location Variável que define a posição de centralização]
 * @type {Google Object}
 */
var var_location = new google.maps.LatLng(-13.496473,-55.722656);
/**
 * [var_mapoptions Define as opções do mapa]
 * @type {Google Object}
 */

var var_mapoptions = {  
zoom: 5,    
center: var_location,
navigationControl: true,
rotateControl: 45,
rotateControlOptions: {
    style: google.maps.MapTypeControlStyle.HORIZONTAL_BAR,
    position: google.maps.ControlPosition.LEFT_CENTER
},
mapTypeControl: true,
mapTypeControlOptions: {
    style: google.maps.MapTypeControlStyle.HORIZONTAL_BAR,
    position: google.maps.ControlPosition.RIGHT_CENTER
},
zoomControl: true,
zoomControlOptions: {
    position: google.maps.ControlPosition.LEFT_CENTER
},
scaleControl: true,
streetViewControl: true,
streetViewControlOptions: {
    position: google.maps.ControlPosition.LEFT_CENTER
},
mapTypeId: google.maps.MapTypeId.SATELLITE,
mapTypeId: google.maps.MapTypeId.ROADMAP
};  
/**
 * [var_map Cria efetivamente o objeto 'mapa' com base nas informações passadas]
 * @type {Google Object}
 */

var var_map = new google.maps.Map(document.getElementById("map-canvas"),var_mapoptions);
var trafficLayer = new google.maps.TrafficLayer();
trafficLayer.setMap(var_map);

/**
 * [init_map Inicializa a API do Google Maps]
 * @return {[strings]} [Variáveis com os parâmetros de inicialização]
 */
function init_map() {
  /**
   * [directionsDisplay Define as opções padrão de visualização das rotas]
   * @type {Google Object}
   */
  directionsDisplay = new google.maps.DirectionsRenderer({suppressMarkers: true});
  directionsDisplay.setMap(var_map);  //Atrela as opções de inicialização ao mapa
  directionsDisplay.setPanel(document.getElementById("directionsPanel"));

  /**
   * BOTÃO PERSONALIZADO DO STREET VIEW
   */
  // Get close button and insert it into streetView
  // #button can be anyt dom element
  var closeButton = document.querySelector('#close-street'),
      controlPosition = google.maps.ControlPosition.RIGHT_CENTER;

  // Assumes map has been initiated 
  var streetView = var_map.getStreetView();

  // Hide useless and tiny default close button
  streetView.setOptions({ enableCloseButton: false });

  // Add to street view
  streetView.controls[ controlPosition ].push( closeButton );

  // Listen for click event on custom button
  // Can also be $(document).on('click') if using jQuery
  google.maps.event.addDomListener(closeButton, 'click', function(){
      streetView.setVisible(false);
  });
}
google.maps.event.addDomListener(window, 'load', init_map);

var thePanorama = var_map.getStreetView();
google.maps.event.addListener(thePanorama, 'visible_changed', function() {
    if (thePanorama.getVisible()) {
      $('#close-street').removeClass('hide');
    } else {
      $('#close-street').addClass('hide');
    }
});

/**
 * [calcRoute Traça a rota no mapa e no intinerário]
 * @return {void} 
 */
function calcRoute() {
  $('#calculaRota i').removeClass('fa-road').addClass('fa-refresh fa-spin');

  // Retrieve the start and end locations and create
  // a DirectionsRequest using  directions.
  var start = document.getElementById('inicio_rota').value;
  var end = document.getElementById('destino_rota').value;
  var request = {
    origin: start,
    destination: end,
    travelMode: google.maps.TravelMode.DRIVING
  };

  limparMapa();

  // Route the directions and pass the response to a function to create markers
  directionsService.route(request, function(response, status) {
    if (status == google.maps.DirectionsStatus.OK) {
      directionsDisplay.setDirections(response);
      var leg = response.routes[0].legs[0];
      makeMarker( leg.start_location, icons.start, "Ponto de Saída" );
      makeMarker( leg.end_location, icons.end, 'Ponto de Chegada' );
      $('#calculaRota').addClass('btn-success');
      $('#calculaRota > i').removeClass('fa-refresh fa-spin').addClass('fa-check');
      setTimeout(function () {
        $('#calculaRota').removeClass('btn-success');
        $('#calculaRota > i').removeClass('fa-check').addClass('fa-road');
      }, 3000);
    }
    else {
      $('#calculaRota').addClass('btn-danger');
      $('#calculaRota > i').removeClass('fa-refresh fa-spin').addClass('fa-times');
      setTimeout(function () {
        $('#calculaRota').removeClass('btn-danger');
        $('#calculaRota > i').removeClass('fa-times').addClass('fa-road');
      }, 3000);
      alert('Não foi possível calcular a rota: ' + status);
      $('#inicio_rota').focus();
    }
  });
}

/**
 * [tracarHistorico Desenha as rotas do histórico no mapa principal]
 * @param  {array} markers Contém a latitude e longitude de cada posicao da tabela de histórico
 */

function tracarHistorico () {
  limparMapaHist();

  markers = posicoes;

  path = new google.maps.MVCArray();
  poly = new google.maps.Polyline({
    map: var_map,
    strokeColor: '#4986E7'
  });

  waitingDialog.show('Traçando Mapa. Por favor aguarde.');
  intervalTraceRoute = setInterval(function (){ drawNewAnimatedMap();},500)

  $('#modal-historico').modal('toggle');
  $("#historico .header").click();
  $('#erase-trace').parent('.clear-trace').removeClass('hide');
  $('#erase-trace').click(function () {
    for (var i = 0; i < lat_lng.length; i++) {  
      lat_lng.splice(i, 1);
    }
    limparMapaHist();
    console.log(markerArrayHist.length);
    path.clear();
  });
}

/**
 * [makeMarker Criação de marcadores -- atualmente somente para ROTAS]
 * @param  {string} position Latitude e longitude do ponto
 * @param  {Google Object} icon     Ícones personalizados das rotas
 * @param  {string} title    Nome do title que será exibido no hover do marcador
 * @param  {boolean} retorna    Se o objecto marcador criado deverá ser retornado
 */
function makeMarker (position, icon, title, retorna) {

  /*
  var marker = new google.maps.Marker({
    position: position,
    map: var_map,
    icon: icon,
    title: title,
    animation: google.maps.Animation.DROP
  });
  */
 var marker = new MarkerWithLabel({
   position: position,
   map: var_map,
   draggable: true,
   raiseOnDrag: true,
   labelContent: title,
   icon: icon,
   animation: google.maps.Animation.DROP,
   labelAnchor: new google.maps.Point(20, 11),
   labelClass: "labels", // the CSS class for the label
   labelInBackground: false
 });

  markerArray.push(marker);
  if (retorna) return marker;
}

/**
 * [verNoMapa Visualiza aquela localização mostrada no Histórico]
 * @param  {float} lat Latitude em decimal degrees
 * @param  {float} lon Longitude em decimal degrees
 */
function verNoMapa (lat, lon) {
  var image = 'imagens/coordenada.png';
  var posHist = new google.maps.LatLng(lat, lon);
  var pointMarker = new google.maps.Marker({
    position: posHist,
    map: var_map,
    icon: image,
    animation: google.maps.Animation.DROP
  });

  markerArrayHist.push(pointMarker);
  pointMarker.setMap(var_map);
  var_map.setZoom(15);
  var_map.panTo(posHist);
}

/**
 * [limparMapa "Zera" as informações contidas no mapa]
 */
function limparMapa () {
  var j = 0;
  // Repete o processo de limpeza 3 vezes
  // Contorna o BUG que mantém posiçoes nos arrays em algumas situações
  while (j < 3) {
    for (i = 0; i < markerArray.length; i++) {
      markerArray[i].setMap(null);  // Primeiro, remove todos os marcadores existentes no mapa.
      marcadores.splice(i, 1);
      markerArray.splice(i, 1);
    }

    for (var i = 0; i < markerArrayHist.length; i++) {
      markerArrayHist[i].setMap(null);
      markerArrayHist.splice(i, 1);
    } 
    j++;
  }
  markerArray = []; // Agora, limpa o array em si.
  markerArrayHist = [];
  marcadores = [];
  directionsDisplay.setDirections({routes: []});  //Remove o traçado das rotas

  $("#slide-panel").addClass('hide'); // Remove o botão de collapse do itinerário de rotas
  $("#inicio_rota").val("");  //Apaga os inputs de rotas
  $("#destino_rota").val(""); //Apaga os inputs de rotas
}


function limparMapaHist () {
  var j = 0;
  // Repete o processo de limpeza 3 vezes
  // Contorna o BUG que mantém posiçoes nos arrays em algumas situações
  while (j < 3) {
    for (var i = 0; i < markerArrayHist.length; i++) {
      markerArrayHist[i].setMap(null);
      markerArrayHist.splice(i, 1);
    } 
    j++;
  }
  markerArrayHist = [];
}

/**
 * [imagemSinal Atualiza o status do sinal do veículo]
 * @param  {char} sinal Caracter contendo o status do sinal [R]astreando | [D]esligado | [S]em sinal
 * @return {[string]}       [Caminho da imagem a ser adicionada de acordo com o status do sinal]
 */
function imagemSinal (sinal) {
  switch (sinal) {
    case 'R':
      var caminho = 'imagens/status_rastreando.png';
    break;

    case 'D':
      var caminho = 'imagens/status_desligado.png';
    break;

    case 'S':
      var caminho = 'imagens/status_sem_sinal.png';       
    break;
  }

  return ("<img src='" + caminho + "' alt='Status do Sinal'>");
}
setInterval(imagemSinal, 3000);

var posVeiculoCerca;
/**
 * [alterarComboVeiculo Marca o veículo ou grupo selecionado no mapa]
 * @param  {string} imei Número do IMEI do veículo ou ID do grupo
 */
function alterarComboVeiculo (imei) {
  limparMapa();
  if (imei) {
    $.ajax({
      url: "dados_veiculo.php",
      type: "GET",
      data: { filtro: imei },
      success: function (aDados) {

        var infowindow = new google.maps.InfoWindow();
        var marker, i;
        var markers = new Array();  
        var enderecos = new Array();
        var endereco;

        var aDados = eval('('+aDados+')');
        for (var i = 0; i < aDados.length; i++) {
          var dados = aDados[i];

          if (dados.sinal == 'D') {
            var imgTipo = '_inativo.png';
          }
          else if (dados.block == 'S') var imgTipo = '_bloqueado.png';
          else var imgTipo = '_ativo.png';

          switch (dados.tipo) {     
            case 'MOTO':
              var image = 'imagens/marker_moto' + imgTipo;
            break;

            case 'CARRO':
              var image = 'imagens/marker_carro' + imgTipo;
            break;

            case 'JET':
              var image = 'imagens/marker_jet' + imgTipo;
            break;

            case 'CAMINHAO':
              var image = 'imagens/marker_caminhao' + imgTipo;
            break;

            case 'VAN':
              var image = 'imagens/marker_van' + imgTipo;
            break;

            case 'PICKUP':
              var image = 'imagens/marker_pickup' + imgTipo;
            break;

            case 'ONIBUS':
              var image = 'imagens/marker_onibus' + imgTipo;
            break;

            case 'TRATOR':
              var image = 'imagens/marker_truck' + imgTipo;
            break;

            default:
              var image = 'imagens/marker_carro' + imgTipo;
            break;
          }

          var imei = dados.imei;
          atualizaDados(imei);

          var myLatLng    = new google.maps.LatLng(dados.latitude, dados.longitude);
          var pointMarker = makeMarker(myLatLng, image, dados.name, true);

          // marca posição do veiculo para quando escolher a cerca
          posVeiculoCerca = new google.maps.LatLng(dados.latitude, dados.longitude);
          // OBTÉM O ENDEREÇO

          /*geocoder = new google.maps.Geocoder();
          geocoder.geocode({'latLng': myLatLng}, 
          function(results, status) {
            if (status == google.maps.GeocoderStatus.OK) {
                dados.endereco = results[0].formatted_address;
            }
            else 
            {
                dados.endereco = status;
            }
          });*/

            google.maps.event.addListener(pointMarker, 'click', (function(pointMarker, i) {
                // OBTÉM O ENDEREÇO

                return function() {
                $('#info-veiculo').modal('toggle');                     
                }
            })(pointMarker, i));


          /*google.maps.event.addListener(pointMarker, 'click', function(e){
            var infoWindow = new google.maps.InfoWindow({
              position: myLatLng,
              content:"<div id='bodyContent' style='text-align:left'><p><b>Placa:</b> "+dados.name+"<br><b>Endereço:</b> "+dados.endereco+"<br><b>IMEI:</b> "+dados.imei+"<br><b>Chip: </b>"+dados.identificacao+"<br><b>Identificação: </b>"+dados.apelido+"<br><b>Rastreador: </b>"+dados.modelo+"</p></div>"
            });
            infoWindow.open(var_map); 
          });*/

          marcadores.push(dados);
        }
        var_map.panTo(myLatLng);
        // Caso seja visualização de GRUPO, define um zoom menor
        // Se for apenas um veículo, define um zoom maior e coloca as informações do hodometro
        if (aDados.length > 1) var_map.setZoom(10);
        else {
          $('li.status-sinal').html(imagemSinal(dados.sinal));
          $('li.status-ignicao').html(estadoIgnicao);
          var_map.setZoom(15);

          exibirListagemHistorico(imei);

          $.ajax({
            url: "menu_hodometro.php",
            type: "GET",
            data: { acao: 'hodometro_atual', imei: imei },
            dataType: "JSON",
            success: function (infoHodometro) {
              $('#hod_atual').val(infoHodometro.hodometro);
              $('#alerta_hodometro').val(infoHodometro.alerta_hodometro);
            }
          });
        }
      }
    });
  }
  else posicionaHistorico();
}
setInterval(alterarComboVeiculo (imei), 5000);
/**
 * [autoReload Atualiza automaticamente a posição dos marcadores a cada 1 min (se houver marcadores)]
 */
function atualizaHistorico () {
  if (markerArray.length > 0) {
    for (var i = 0; i < markerArray.length; i++) {
      //console.log('marker ' + i);

      //atualizar historico
      $.ajax({
        url: "listagem_nova_interface.php",
        type: "GET",
        data: { 'imei': marcadores[i].imei },
        success: function (result) {
          $("#historico .content table tbody").html(result);
        }
      });

      $.ajax({
        url: "dados_veiculo.php",
        data: { posicao: marcadores[i].imei},
        success: function (coordenadas) {
          var coordenadas = eval('('+coordenadas+')');
          for (var i = 0; i < coordenadas.length; i++) {
            //console.log('coordenada '+ i);
            // DEFINE A NOVA POSIÇÃO
            var novaPos = new google.maps.LatLng(coordenadas[i].latitude, coordenadas[i].longitude);
            markerArray[i].setPosition(novaPos);

            // DEFINE O NOVO ICONE QUE SERÁ UTILIZADO
            var dados = coordenadas[i];

            if (dados.sinal == 'S' || dados.sinal == 'D') {
              var imgTipo = '_inativo.png';
            }
            else if (dados.block == 'S') var imgTipo = '_bloqueado.png';
            else var imgTipo = '_ativo.png';

            switch (dados.tipo) {     
              case 'MOTO':
                var image = 'imagens/marker_moto' + imgTipo;
              break;

              case 'CARRO':
                var image = 'imagens/marker_carro' + imgTipo;
              break;

              case 'JET':
                var image = 'imagens/marker_jet' + imgTipo;
              break;

              case 'CAMINHAO':
                var image = 'imagens/marker_caminhao' + imgTipo;
              break;

              case 'VAN':
                var image = 'imagens/marker_van' + imgTipo;
              break;

              case 'PICKUP':
                var image = 'imagens/marker_pickup' + imgTipo;
              break;

              case 'ONIBUS':
                var image = 'imagens/marker_onibus' + imgTipo;
              break;

              case 'TRATOR':
                var image = 'imagens/marker_trator' + imgTipo;
              break;

              default:
                var image = 'imagens/marker_carro' + imgTipo;
              break;
            }
            // Atualiza a imagem de status do sinal se não for grupo (apenas uma posição no array)
            if (coordenadas.length == 1)
            {
                 $('li.status-sinal').html(imagemSinal(dados.sinal));
                 $('li.status-ignicao').html(estadoIgnicao);
                 if (coordenadas[i].ligado=='S')
                 {
                    $('li.status-ignicao').html('<p style="font-face: verdana; font-size: 9px; color:#0F0; display: block; padding: 10px; padding-top: 20px;">Ligado</p>');
                 }
                 else
                 {
                    $('li.status-ignicao').html('<p style="font-face: verdana; font-size: 9px; color:#CCC; display: block; padding: 10px; padding-top: 20px;">Desligado</p>');
                 }
            }
            if (markerArray[i].getIcon() != image) {
              markerArray[i].setIcon(image);
              console.log(image);
            }
            console.log(novaPos);           

          }
        }
      });
    }
  }
}
setInterval(atualizaHistorico, 5000);

function atualizaDados(imei) {
    $("#exibeDados").load('ajax.php?imei='+imei);
}

function getAddressGMaps(lat,long)
{
    var myLatLng = new google.maps.LatLng(lat, long);

    // OBTÉM O ENDEREÇO
    geocoder = new google.maps.Geocoder();
    geocoder.geocode({'latLng': myLatLng}, function(results, status) {
        if (status == google.maps.GeocoderStatus.OK) {
            alert(results[0].formatted_address);
        }
        else 
        {
            alert('Desculpe, não consegui identificar o endereço. Por favor tente novamente em instantes.');                
        }
    });
}

var poly;
var polyOptions = {
    strokeColor: '#000000',
    strokeOpacity: 1.0,
    strokeWeight: 3,
    map: var_map
}
poly = new google.maps.Polyline(polyOptions);   

function drawNewAnimatedMap()
{       
    i = counterTrace;

    var lat_lng = [];       

    if (i == 0) 
    {
        var iconeImg = icons.end;
    }
    else if (i == (markers.length -1)) 
    {
        var iconeImg = icons.start;
    }
    else 
    {
        var iconeImg = 'imagens/marcador_historico.png';
    }

    var data = markers[i];

    var myLatlng = new google.maps.LatLng(data.lat, data.lng);
    lat_lng.push(myLatlng);

    // polyline com a rota percorrida do ponto anterior até aqui.
    var path = poly.getPath();
    path.push(myLatlng);

    var marker = new google.maps.Marker({
      position: myLatlng,
      icon: iconeImg,
      map: var_map
    });
    var_map.panTo(myLatlng);
    var_map.setZoom(17);

    latlngbounds.extend(marker.position);
    markerArrayHist.push(marker);

    if (i == markers.length-1)
    {
        clearInterval(intervalTraceRoute);
        var_map.setCenter(latlngbounds.getCenter());
        var_map.fitBounds(latlngbounds);
        waitingDialog.hide();

    }
    counterTrace++;
}

var myApp;
myApp = myApp || (function () {
    var pleaseWaitDiv = $('<div class="modal hide" id="pleaseWaitDialog" data-backdrop="static" data-keyboard="false"><div class="modal-header"><h1>Processing...</h1></div><div class="modal-body"><div class="progress progress-striped active"><div class="bar" style="width: 100%;"></div></div></div></div>');
    return {
        showPleaseWait: function() {
            pleaseWaitDiv.modal();
        },
        hidePleaseWait: function () {
            pleaseWaitDiv.modal('hide');
        },

    };
})();

$("#cmbLimite").change(function(){
    if ($("#cmbLimite").val()>100)
    {
        alert("Atenção: Escolhido mais de 100 pontos. É possível que o histórico e o mapa demorem a ser processados.");
    }
});
setInterval (autoReload, 5000)