[AJAX]aggiornamento dinamico di un marker su una mappa

[nonsopiuchedire]

Ciao a tutti, questa è la mia situazione:

ho un'applicazione web che, interagendo con un DB, ottiene delle
coordinate e segnala, con un marker google, la posizione.
Ogni volta che voglio vedere se la posizione è cambiata devo riaggiornare
la pagina.

Quello che vorrei è: aggiornare dinamicamente il marker, in modo da vedere
il "movimento" di questo sulla mappa.

Sò che in ajax è possibile. Come si fa?

Grazie

[artorius]

beh, puoi usare una libreria JS che lancia una richiesta AJAX periodica ed ottiene i dati per le coordinate in formato JSON e li passa all'oggetto GMarker che applichi alla mappa, poi centri la stessa sulle nuove coordinate.

Puoi creare un file PHP che stampi la latitudine e longitudine nel formato JSON:

{
   "lat" : 126513,
   "lng" : 255684
}

Poi Usando una libreria, tipo MooTools, fai in modo di eseguire la chiamata AJAX periodica:

var ReqJSON, googmarker, googmap;

var defaultCoord; //Qui ci metti il codice PHP per generare l'oggetto JS con le coordinate da mostrare all'apertura della pagina

var Init = function(){
   ReqJSON = new Request.JSON({
        'url': 'path/to/file.php',
        'onSuccess' : CallbackFnct
   });

   //Qui inizializzi la mappa di Google salvandola in googmap e il marker da mettere nella mappa,
   //salvandolo in googmarker prima di aggiungerlo, usando le defaultCoord per dare le coordinate del marker

   //Poi lanci la richiesta AJAX periodicamente
   PeriodialFunct.periodical(3000); //Esegue la funzione ogni 3 secondi
}

var CallbackFnct = function(obj){
   //Creo un nuovo oggetto GLatLng che userò per impostare il centro della mappa e le coordinate del Marker
   var newLatLng = new GLatLng(obj.lat, obj.lng, true);
   googmarker.setLatLng(newLatLng);
   googmap.setCenter(newLatLng);
}

var PeriodialFunct = function(){
   ReqJSON.get();
}

Se hai bisogno di passare alla pagina PHP dei parametri devi passarli nel formato JS object nella chiamata di get();

Es.

ReqJSON.get({
   'mykey' : 'myvalue',
   'mysecondkey' : 'mysecondvalue'
});

La richiesta diventa path/to/file.php?mykey=myvalue&mysecondkey=mysecondvalue

[nonsopiuchedire]

E se uso java perché non conosco php?

[br1]

Originariamente inviato da nonsopiuchedire
E se uso java perché non conosco php?

In questo caso sposto la discussione

[nonsopiuchedire]

Non capisco,
la mia applicazione è fatta in java,
uso javascript per il marker e la mappa di google, e
vorrei usare ajax per aggiornare dinamicamente il
marker.

Dove dovrei chiederle queste informazioni se non qui?

[Andrea1979]

come produci, da java (jsp/servlet), l'output -contenente html e javascript- per il browser? Ecco, devi far in modo di avere quella routine chiamata in get/post via ajax e di sparare il contenuto della risposta nel div, o altro elemento, in cui hai destinato la mappa con i marker.

[nonsopiuchedire]

Non ho capito bene, puoi essere più esplicito?
Io non conosco per niente ajax.

Grazie

[Andrea1979]

Allora comincia con il leggere la guida che trovi qui:

http://javascript.html.it/guide/leggi/95/guida-ajax/

perché altrimenti non se ne esce tanto facilmente.

C'è da capire solo una cosa di fondo: per sommi capi, con ajax l'output di una elaborazione server-side viene "infilato" in una variabile javascript, e da questa ci fai quel che ti serve. Tipicamente per quello che serve a te succederà qualcosa del genere

// pagina/servlet che si occupa di generare la mappa
<%
String lon = request.getParameter("lon");
String lat = request.getParameter("lat");
%>
// da p creerai la tua mappa (suppongo gestita via <img> + qualcos'altro - ovvero
// le api di google-maps, live-maps o qualsivoglia altro servizio analogo
[img]tuo_servizio_blah_blah?lon=<% out.print(lon); %>&lat=<% out.print([/img]
... />

Il prodotto (html + javascript) di questa elaborazione finirà in quella variabile javascript di cui sopra. Da quella, l'aggiornamento di un tuo div di destinazione è questione di un'altra riga di javascript

document.getElementById("display_div").innerHTML = tua_variabile_destinazione_dell_elaborazione;

Sembra complicato? Leggi la guida linkata e tutto sarà più chiaro.

[nonsopiuchedire]

Grazie sei stato veramente gentile.