Personal tools
Google Maps senza troppi pensieri? Ci aiuta jQuery!

Maplace.js: semplificare l'uso della gmaps

Jan 29, 2014

Google Maps senza troppi pensieri? Ci aiuta jQuery!

Quando abbiamo bisogno di inserire delle Google Maps in una pagina web può essere utile farsi dare una mano. Vediamo come

Keep it Simple!!

Quando si programma, come in ogni attività, è inutile complicarsi la vita.

Da plonista, oramai conosco diversi modi complessi per risolvere un task; ma, ad esempio, se dovessi fare un form di invio al server di una stringa, non avrebbe senso impiegare

findxtutta la machinery di z3c.form, quando 5 righe di form in html puro le sanno scrivere tutti (vero...?!).

Lo stesso discorso vale anche al di fuori della programmazione: c'è sempre qualcuno disposto a complicarci la vita... perché favorirgli il lavoro?

Partiamo da uno use case

Un cliente vorrebbe fare l'upgrade di un prodotto per la visualizzazione tramite Products.Maps di diversi layer prestabiliti, ognuno con N marker.

L'ideale per il cliente sarebbe usare collective.geo.bundle per ogni use case presente nel sito ma, almeno con la versione di collective.geo utilizzabile in quel contesto, la funzionalità cercata non è immediata da riprodurre...

Nella versione di collective.geo che può usare il cliente, infatti (non so nella più recente), non è possibile gestire facilmente più layer che caricano diversi marker: ad una prima analisi, è necessario quanto meno creare una vista e un multiadapter che si adatta alla vista e al contesto corrente per mostrare i layer selezionati (e ignoriamo il "selezionati come?").

Sappiamo sicuramente fare un multiadapter, ma.... non possiamo semplificare il task?

Navigando in rete si trovano diversi plugin jQuery utilizzabili con le jAPI javascript di Google Maps. A questo punto, fare una vista con un po' di html e di javascript, potrebbe essere risolutivo oltre che semplice.

Fra le varie librerie che ho trovato mi è piaciuta Maplace.js, semplice e intuitiva da usare. In poco tempo sono riuscito ad ottenere i risultati sperati.

Una semplice mappa

Per utilizzare Maplace.js è sufficiente caricare, nella pagina jQuery, le API js di Google Maps, il sorgente di Maplace.js e avere un div il cui id sia 'gmap' in cui caricare la mappa. Dopodiché, sull'on load della pagina è possibile richiamare questo codice js:

 
  var maplace = new Maplace(); 
  maplace.Load();

Avremo così una prima semplice mappa:

Mappa-lucabel

Risolviamo il problema iniziale

Leggendo la documentazione della libreria sul sito, è stato abbastanza semplice capire come risolvere il problema. Semplificando, è bastato creare un hastable javascript, contenente i marker in questo formato:


var LocsA = [ { lat: 44.542222, lon: 11.934722, title: 'Voltana', icon: 'http://maps.google.com/mapfiles/marker_green.png' }, .... ] hastable = {'LocsA': LocsA, 'LocsB': LocsB, 'LocsC': LocsC}

Una volta preparati i dati da utilizzare per l'esempio, si può creare l'html necessario:


<ul id="menu"> <li><a href="javascript:void(0)" data-load="LocsA" id="LocsA" title="Group A">Voltanese</a></li> <li><a href="javascript:void(0)" data-load="LocsB" id="LocsB" title="Group B">Alfonsinese</a></li> <li><a href="javascript:void(0)" data-load="LocsC" id="LocsC" title="Group C">Argentano</a></li> </ul> <div id="gmap" style="width: 50%"></div>
E infine il javascript da eseguire sull'on load della pagina (occhio ai commenti):
  
//si crei un oggetto mappa
var maplace = new Maplace();
//Si faccia il bind fra il click e la funzione che gestirà l'evento
//sul menù dei layer $('#menu a').click(function(e) { e.preventDefault(); var index = $(this).attr('data-load'); showGroup(index); });
//Si imposti una classe sul layer attivo del menù, si rimuova il
//vecchio menù che verrà rigenerato e si carichi nella mappa
//i nuovi marker; questo può banalmente essere fatto anche via ajax... function showGroup(index) { $('#menu li').removeClass('active'); $('#menu li #'+index).parent().addClass('active'); $('.gmap_controls').remove(); maplace.Load({ locations: hastable[index], force_generate_controls: true }); }
//Si carichi ora la mappa iniziale con alcune opzioni di base maplace.Load({ map_options: { zoom: 10, set_center: [44.55, 11.966667] }, map_div: '#gmap', controls_type: 'list', controls_on_map: true, generate_controls:true, view_all: false, }); });

Grazie a queste poche righe di codice, è possibile ottenere risultati come questo:

mappa comepleta lucabel

Il menù laterale all'estrema destra (oltre a motivare la presenza dei grafici in questa vita) permette di scegliere quale layer caricare nella mappa; dopodiché, tramite il menù all'interno della mappa, è possibile posizionarsi su un marker piuttosto che sull'altro.

Lascio alla documentazione sul sito della libreria la possibilità di mostrare la moltitudine di opzioni applicabili alle mappe.

A mio avviso questo è un modo molto semplice e diretto di risolvere la richiesta; inoltre, quando ci si costringe a cercare delle alternative, si possono trovare librerie molto comode.

L'immagine per Facebook è presa da: http://www.flickr.com/photos/bulle_de/4672972586/sizes/n/

L'immagine per la testata è presa da: http://www.flickr.com/photos/manitobamaps/2089812938/

comments powered by Disqus