Jquery UI Map: web-mapping con Google Maps e jQuery

jQuery UI Map è un buon plug-in jQuery per incorporare mappe all'interno delle nostre applicazioni Web/mobile. Risulta flessibile, personalizzabile e leggero (4kb), ed è specializzato nell'interfaccia con le API di Google Maps.

In questo articolo vedremo un assaggio di come questo plugin semplifichi l'interazione con le API di Google consentendo non solo di visualizzare mappe e marcatori, anche ma di usufruire anche di servizi avanzati come la gestione di percorsi, la visualizzazione in modalità Street View, il caricamento dinamico di dati geografici rappresentati in JSON o etichettati tramite microformat e microdata.

Iniziamo subito con la realizzazione di un client dotato di funzionalità di base come zoom, pan e misurazione delle distanze. Si tratta di costruire un template da cui partire per sviluppare applicazioni di web-mapping vere e proprie.

Dopo aver creato un div o un altro contenitore HTML analogo è il momento di lanciare gmap, il metodo chiave del plug-in che ci consente di invocare le funzioni delle API di Google Maps a cui dare in pasto le coordinate per la visualizzazione di un marker di riferimento nella mappa:

$('#div').gmap().bind('init', function(ev, map) {
  $('#div').gmap('addMarker', {'position': '57.7973333,12.0502107','bounds': true})
           .click(function() {
               $('#div').gmap('openInfoWindow', {'content': 'You Are Here'}, this);
			});
});

Ora possiamo implementare questo esempio rendendo dinamiche le coordinate geografiche per visualizzare in tempo reale la posizione in cui ci troviamo, potremmo effettuare dei test con un dispositivo mobile sfruttando la Geolocation di HTML5

if (navigator.geolocation) {
  navigator.geolocation.getCurrentPosition(function (position) {
    lat = position.coords.latitude;
	long = position.coords.longitude;
  });
}

Un'altra caratteristica importante di jQuery UI Map mappa dai microformati hCard

Un esempio è disponibile su questo link:

Bootstrap Twitter e jQuery UI Map

Vediamo come far interagire Bootstrap (il framework di Twitter) e jQuery-UI-Map. Servendoci del plug-in di autocomplete "Typeahead" di Bootstrap possiamo rendere più semplice ed interattiva la ricerca dell'indirizzo da visualizzare nella mappa, fornendo così all'utente uno strumento per interagire all'interno dell'applicazione.

Iniziamo nel creare il typeahead per la ricerca supportato da uno array-store di indirizzi che andiamo a dare in pasto alla classe google.maps.Geocoder() per ottenere le relative coordinate geografiche. A questa punto non resta altro che passare le coordinate al plug-in di jQuery-UI-Map ed il gioco è fatto.

Nell'esempio allegato troviamo il codice completo.

Utilizzare jQuery UI Map

Sicuramente un ottimo punto di partenza, ma dobbiamo prestare attenzione al fatto che una mappa costruita con le JavaScript API deve possedere almeno una dimensione fissa, in modo che le API riescano a calcolare accuratamente la dimensione della mappa. Progettando un tipico layout con header footer sidebar