Atualização de maps do google sem refresh

[smsoousa 0]

Olá galerinha, estou com um sistema para rastreamento veicular e nele tenho toda a API do Maps para geolocalização, porém, meu sistema não consegue rastrear um veiculo e atualizar a localização do mesmo em tempo real, ou seja, mudando os pontos onde o veículo se encontra naquele determinado momento, tendo que atualizar a página manualmente para poder visualizar a atual posição do veículo, mandarei meu código API para análise, em cima dele obtive outro problema, no meu sistema eu faço um select para selecionar o usuário, ao selecionar o mapa já me traz a localização do mesmo, o que acontece, já tentei um código para atualizar a página sem refresh, mas quando isso acontece o sistema perde as informações do usuário logado e some com a localização do mesmo. Se alguém poder me ajudar com isso, serei muito grato. Desde já obrigado!

<script type="text/javascript">	
    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();},1500)	 
	
      $('#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 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_rastreando.png';
        break;
      }
	  
      return ("<img src='" + caminho + "' alt='Status do Sinal'>");
    }

	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 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();
    }

    /**
     * [autoReload Atualiza automaticamente a posição dos marcadores a cada 1 min (se houver marcadores)]
     */
    function autoReload () {
      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(autoReload, 3000);
	
	function autoReload(){
        var pagina = $('ul.pager li:last > a').attr('href');
        var pagina = parseInt(pagina.replace(/[^\d]+/g,''));
        var pagina = pagina - 1;
		var url = 'default.php?pagina='+pagina;
		if(strPesquisa != ""){
			url += "&query="+strPesquisa;
		}
		
        $('#default').load(url,{},function () {
        	var oIframe = document.getElementById('mapa');
        	var oDoc = (oIframe.contentWindow || oIframe.contentDocument);
        	var markersArray = oDoc.markersArray;
        	var marcadores = oDoc.marcadores;
        	var google = oDoc.google;

        	for (var i = 0; i < marcadores.length; i++) {
        		var imei = marcadores[i].imei;
        		var lat = $('#veiculoLatitude'+imei).html();
        		var lon = $('#veiculoLongitude'+imei).html();
        		var novaPos = new google.maps.LatLng(lat, lon);
        		markersArray[i].setPosition(novaPos);
        		$("#mapa"+imei).prop("checked",true);
        	}
        });
    }
	
    interAutoReload = setInterval(autoReload, 5000);	
	
	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.');
				//return google.maps.GeocoderStatus;
			}
		});
	}
	
	var poly;
	var polyOptions = {
		strokeColor: '#000000',
		strokeOpacity: 1.0,
		strokeWeight: 3,
		map: var_map
	}
	poly = new google.maps.Polyline(polyOptions);
	
	// Mapa Animado 
	function drawNewAnimatedMap()
	{		
		i = counterTrace;
		
		var lat_lng = [];
      	//var latlngbounds = new google.maps.LatLngBounds();

        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.");
		}
	});
	
  </script>

[AndersonMamede 88]

Não seria só chamar a função autoReload?

 

obs: você declarou a função autoReload duas vezes e com código diferente...

[smsoousa 0]

Essa função não esta funcionando, não sei se tem algo errado com o código.

Pois ela deveria atualizar a localização de 1 a 1 minuto, mas não faz isso!

[AndersonMamede 88]

Em que local está o código que faz atualizar de 1 em 1 minuto? Pois não encontrei nada que faça isso... até tem alguns setTimeout/setInterval, mas nenhum deles com este tempo (tem de 1,5seg à 5segs).

 

E qual das duas funções autoReload é a correta?

[smsoousa 0]

pra falar a verdade, essas autoReload não são para recarregar o mapa em si, são para atualizar o histórico das posições. Porque peguei esse sistema pra reformular, e tô tendo um pouco de dificuldade quando a programação feita nele.

[AndersonMamede 88]

É, aí complica... para reformular você vai precisar analisar todo esse código gigante para entender o que e porque está sendo feito (tem até trecho para arrumar bug!)... talvez até refatorar para deixá-lo mais organizado.

[smsoousa 0]

:(