Archivi tag: Javascript

Multiple marker e Multiple infoWindow con Google Maps

Lascia una risposta

Tempo fa mi sono imbattuto in un problema che poi come sempre si è risolto in maniera abbastanza ovvia (basta studiare), e che si è riproposto ultimamente a degli amici, per cui pubblico qui la soluzione.

Le Api di google maps, permettono l’uso (nel caso delle mappe dinamiche), di markers che direttamente in javascript ci fanno aggiungere i segnaposti sulle mappe.

Ora ogni segnaposto è previsto di una property text per mostrare ad esempio l’indirizzo passando sopra un marker. Se vogliamo invece mostrare una finestra con markup html all’interno allora dobbiamo utilizzare la InfoWindow, messa sempre a disposizione da google maps.

Per far in modo che questa infowindow sia posizionata e aperta al click di un marker dobbiamo registrare l’evento per ogni marker.

La documentazione di esempio di google maps fa l’esempio con un solo marker quindi erroneamente indica questo:

1
2
3
4
5
6
7
8
9
10
11
google.maps.event.addListener(marker, 'click', function() {

infowindow.close();

infowindow.setContent("markup html");

infowindow.setPosition(marker.position);

infowindow.open(map, marker);

});

Il problema è che se marker è l’istanza corrente di un marker creato all’interno di un ciclo, quando andiamo a registrare il listener per l’evento “onclick” non dobbiamo riferirci a lui in questo modo “marker.position” per passare la posizione, perche cosi facendo passiamo la posizione dell’ultimo marker del ciclo.. Dobbiamo usare il this.. in modo che ogni listener abbia il riferimento alla sua istanza di marker.

(Si questa cavolata ha fatto perdere diverse ore a piu persone)

Praticamente quando andiamo a creare i nostri marker da mostrare, creiamo l’evento onClick per questo marker in questo modo:

1
2
3
4
5
6
7
8
9
10
11
12
13
//dopo aver creato un marker

google.maps.event.addListener(marker, 'click', function() {

infowindow.close();

infowindow.setContent(this.html);

infowindow.setPosition(this.position);

infowindow.open(map, this);

});

la property html sul marker non esiste. La uso io (in javascript gli oggetti non sono altro che degli insiemi di property che possono essere manipolati dinamicamente) in genere durante la generazione dei markers per passare il markup che deve essere contenuto nella infowindow, cosi da non settare la property text e disabilitare il baloon standard.

 

Esempio di marker con la InfoWindow:

That’s All Folks..

 

 

 

Ottenere le coordinate GPS dal browser con HTML5

Lascia una risposta

Un modo semplice e veloce per ottenere le coordinate gps ,in una pagina html, mediante html5 .

La funziona javascript getCurrentPosition interroga ,se disponibile ,il nostro dispositivo gps (previa richiesta di autorizzazione)  . Se non riesce ad ottenerla da gps può comunque derivarla dall’indirizzo ip, ma il comportamento e le regole sono completamente a carico dell’implementazione del browser.

Questa è la funzione che va usata:

1
2
3
4
5
6
7
8
9
10
11
12
13
if(navigator.geolocation){

navigator.geolocation.getCurrentPosition(successCallback,

errorCallback,

{timeout:60000});

}else{

alert("Il browser non ha un dispositivo GPS");

}

Come vedete la funzione ha due callback, uno che viene invocato in caso di successo e l’altro di errore. Nei parametri e’ possibile impostare il timeout, cioè il tempo di attesa di synch con il gps prima di andare in errore di timeout. Da notare che questo tempo scatta da prima che appaia la popup di richiesta autorizzazione, quindi influisce molto nell’usabilità dell’interfaccia utente. 60 secondi in genere sono un valore sufficiente.

Ora descriviamo cosa deve fare la nostra pagina con i due callback:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
//callback in caso di successo

function successCallback(position){

alert("Posizione:[lat="+position.coords.latitude+"][long="+position.coords.longitude+"]");

}

//callback in caso di errore

function errorCallback(error){

switch(error.code){

case error.PERMISSION_DENIED: alert('accesso negato');break;

case error.POSITION_UNAVAILABLE:alert('impossibile ottenere posizione');break;

case error.TIMEOUT:alert('timeout');break;

default: alert('errore generico');break;

}

}

Alcuni browser memorizzano l’autorizzazione con durata giornaliera, altri richiedono l’autorizzazione ogni volta.

Una cosa a cui prestare attenzione è il fatto che la funzione è asincrona, quindi difficile da gestire all’interno di un evento di button pressed o cose simili.

Consigli:

Meglio sfruttarlo nell’onload del document , magari facendo una pagina adHoc che aspetti il timeout della funzione mostrando l’icona di loadinprogress, in modo da far capire all’utente che la lettura dei dati dal gps è in corso.

Qui troverete una documentazione accurata, anche se solo in draft, ma vi consiglio di testare le vostre pagine con tutti i browser in quanto hanno comportamenti molto differenti.

http://dev.w3.org/geo/api/spec-source.html