Superposiciones en google maps con movimiento

[CyberKabexa]

Hola Saludos a todos, este es mi primer post pues soy nuevo en la comunidad.

Estoy realizando un proyecto con GPS y google maps, tenemos unos dispositivos GPS que envian datos (latitud, longitud, velocidad, etc) a un servidor y se guarda en una base de datos SQL; por otro lado esta un portal web que muestra un mapa de google maps y en el mapa muestra la ubicacion de los vehiculos e incluso dibuja una linea mostrando su trayectoria más reciente, hasta ahi estamos bien pero lo que se pretende es que el objeto se vaya moviendo en el mapa a medida que se vaya actualizando la base de datos sin tener que refrescar la página o el mapa en si.

Algo como esto [URL="http://live.liveviewgps.com/"]http://live.liveviewgps.com/[/URL] se pretende.

De antemanos agradezco las ideas y la ayuda que me puedan proporcionar. Saludos!

[Patriarka]

y con ajax, hace un div que se vaya actualizando cada 1 segundo ejecutando la funcion que dibuja el mapa.

setTimeOut("actualizaMapa();",1000)

pd: La funcion tiene que ser recursiva!

[memoadian]

¿cada segundo? ¿no es muy corto tiempo?

[Patriarka]

esta hablando de algo en tiempo Real,
si ven que tarda mucho en generar el mapa lo vas subiendo
sino ponele el que mas te gusta!

[memoadian]

bueno pero no te enojes jaja, lo decia no más como comentario. :)

[CyberKabexa]

Iniciado por Patriarka

y con ajax, hace un div que se vaya actualizando cada 1 segundo ejecutando la funcion que dibuja el mapa.

setTimeOut("actualizaMapa();",1000)

pd: La funcion tiene que ser recursiva!

Hola, gracias por tomarte el tiempo para contestar. Probé usando el setTimeOut como me sugeriste pero solamente se ejecuta una sola vez pasando X segundos, lo que necesito es que se ejecute una y otra vez pero cada vez que lo haga que consulte en la base de datos por si existen nuevos datos (por si el vehiculo cambia de posición); logré que la función se ejecute una y otra vez cada X segundos con setInterval pero lo que hace es pintar una y otra vez lo mismo encima, o sea no consulta en la base de datos y solamente dibuja la linea y la posición del vehiculo uno encima de otro.

Básicamente lo que necesito es que al abrir el portal me muestre la ubicación inicial del vehículo y que consulte en la base de datos cada 3 segundos, por decir algo, y que me muestre su posición nueva borrando la anterior para no encimar.

Cualquier nueva idea o sugerencia es bienvenida. Gracias!

[Patriarka]

mostrame la funcion que hace eso,
pero en resumen seria algo asi:

Código Javascript:

function actualizaMapa(){
//GENERERO MAPA EN EL DIV ID="MAPA"
//PARA NO REESCRIBIR ENCIMA DEL MAPA ENTONCES 
document.getElementById('MAPA').innerHTML="";
setTimeOut("actualizaMapa()", 3000); //ACTUALIZO EL MAPA CADA 3 SEGUNDO
}
 

[quike88]

Iniciado por Patriarka

y con ajax, hace un div que se vaya actualizando cada 1 segundo ejecutando la funcion que dibuja el mapa.

setTimeOut("actualizaMapa();",1000)

pd: La funcion tiene que ser recursiva!

La función tiene que ser recursiva:

Código Javascript:

function actualizaMapa(){
    //todo el código
    setTimeout("actualizaMapa();", 1000);       
}
 setTimeout("actualizaMapa();", 1000);
 

Saludos

[Patriarka]

Iniciado por Patriarka

mostrame la funcion que hace eso,
pero en resumen seria algo asi:

Código Javascript:

function actualizaMapa(){
//GENERERO MAPA EN EL DIV ID="MAPA"
//PARA NO REESCRIBIR ENCIMA DEL MAPA ENTONCES 
document.getElementById('MAPA').innerHTML="";
setTimeOut("actualizaMapa()", 3000); //ACTUALIZO EL MAPA CADA 3 SEGUNDO
}
 
//EJECUTO LA FUNCION POR PRIMERA VEZ
window.onload=actualizaMapa;
 

[CyberKabexa]

Con este código pinto el mapa:

Código Javascript:

var map;
    function initialize() {
        var latlng = new google.maps.LatLng(15.623037,-90.351562);
        var settings = {
            zoom: 4,
            center: latlng,
            mapTypeControl: true,
            mapTypeControlOptions: {style: google.maps.MapTypeControlStyle.DROPDOWN_MENU},
            navigationControl: true,
            navigationControlOptions: {style: google.maps.NavigationControlStyle.ZOOM_PAN},
            mapTypeId: google.maps.MapTypeId.ROADMAP
    };
 
map = new google.maps.Map(document.getElementById("map_canvas"), settings);
 
setInterval("unidades()",2000);
//unidades()
 
}
 
 
      google.maps.event.addDomListener(window, 'load', initialize);
 

con setInterval llamó cada 2 segundos a la funcion unidades que es la que me muestra la ubicación del vehículo así como su trayectoria recorrida. Te la comparto, es esta:

Código Javascript:

function unidades(){
 
<?Php 
    $imei_sql="EXEC sp_GetIMEI";
    $res_imei=mssql_query($imei_sql);
    
    while($array_imei=mssql_fetch_array($res_imei)){
    $imei=$array_imei['IMEI'];
    $sqlquery="EXEC sp_GetLastRecord '$imei'";
    $res_sqlquery=mssql_query($sqlquery);
    $ar_sqlquery=mssql_fetch_array($res_sqlquery);
    //$latitud=$ar_query['LATITUDE'];
    //$longitud=$ar_query['LONGITUDE'];
    //$imei=$ar_query['IMEI'];
    //$speed=$ar_query['SPEED'];
?>
 
var contentString = '<div class="content">'+
                    '<div class="siteNotice">'+
                    '</div>'+
                    '<h3 class="firstHeading"><?Php echo $array_imei['NAME']; ?></h3>'+
                    '<div class="bodyContent">'+
                    '<p><?Php echo $ar_sqlquery['IMEI']; ?></p>'+
                    '<p>Latitude: <?Php echo $ar_sqlquery['LATITUDE']; ?></p>'+
                    '<p>Longitud: <?Php echo $ar_sqlquery['LONGITUDE']; ?></p>'+
                    '<p>Velocidad: <?Php echo $ar_sqlquery['SPEED']; ?> Km/h</p>'+
                    '<p><?Php echo $ar_sqlquery['TIMESTAMP']; ?></p>'+
                    '<p><a target="_blank" href="http://maps.google.com/maps?f=q&q=<?Php echo $ar_sqlquery['LATITUDE']; ?>,<?Php echo $ar_sqlquery['LONGITUDE']; ?>&z=16">Ver en Google maps</a></p>'+
                    '</div>'+
                    '</div>';
                var infowindow<?Php echo $cont; ?> = new google.maps.InfoWindow({
                    content: contentString
                });
 
/*Car*/
var carLogo = new google.maps.MarkerImage('images/car.png',
    new google.maps.Size(40,40),
    new google.maps.Point(0,0),
    new google.maps.Point(20,20)
);
 
var carPos = new google.maps.LatLng(<?Php echo $ar_sqlquery['LATITUDE']; ?>,<?Php echo $ar_sqlquery['LONGITUDE']; ?>);
var carMarker<?Php echo $cont; ?> = new google.maps.Marker({
    position: carPos,
    map: map,
    icon: carLogo,
    title:"<?Php echo $array_imei['NAME']; ?>"
});
 
/*Muestra globo con la info*/
google.maps.event.addListener(carMarker<?Php echo $cont; ?>, 'click', function() {
infowindow<?Php echo $cont; ?>.open(map,carMarker<?Php echo $cont; ?>);
});
 
/*Polilínea*/
var Ruta = [
                  <?Php 
                  $sql="EXEC sp_GetLastHundred '$imei'";
                  $res_sql=mssql_query($sql);
                  //$ar_sql=mssql_fetch_array($res_sql)
                  while ($ar_sql=mssql_fetch_array($res_sql)){
                  echo 'new google.maps.LatLng('.$ar_sql['LATITUDE'].','.$ar_sql['LONGITUDE'].'), '; 
                  } ?>
                 
                  
    ];
 
  var carPath = new google.maps.Polyline({
    path: Ruta,
    strokeColor: "#FF0000",
    strokeOpacity: 1.0,
    strokeWeight: 4
  });
 
  carPath.setMap(map);
 
<?Php $cont++; } ?>
}
 

En la función unidades es donde hago la consulta a la BD.