Con questo CODE-IT impareremo a gestire le mappe di Google con Ext. Se uniamo le conoscenze accumulate con i video di introduzione ad Ext e i primi CODE-IT , arriviamo all'esempio di questo video in cui vediamo un gradevole PopUp contenente una mappa a cui possiamo associare azioni particolari.
Per cominciare inseriamo nel nostro codice html le tre righe utili ad utilizzare Ext.
<link rel="stylesheet" type="text/css" href="../ext/resources/css/ext-all.css" />
<script type="text/javascript" src="../ext/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="../ext/ext-all.js"></script>
Subito dopo provvederemo a scrivere il codice che occorre per inserire delle mappe di Google. Per far questo dobbiamo andare sul sito di Google Map all'indirizzo per gli sviluppatori che trovate nella trascrizione di questo CODE-IT e registrare il sito per cui stiamo richiedendo una chiave. Fatto questo recupereremo una stringa piuttosto lunga di caratteri che dobbiamo semplicemente incollare nel nostro foglio HTML.
<script src="http://maps.google.com/maps?file=api&v=2.x&key=ABQIAAAAJDLv3q8BFBryRorw-851MRT2yXp_ZAY8_ufC3CFXhHIE1NvwkxTyuslsNlFqyphYqv1PCUD8WrZA2A" type="text/javascript"></script>
Inseriamo il plugin di Ext per gestire le mappe di Google all'interno dei popup, e il codice per includere anche un file che chiameremo gmap.js in cui metteremo le linee di javascript con l'elenco dei luoghi che vogliamo segnalare nella mappa. Potete notare come non serva fare nulla di complesso all'interno di questa pagina di esempio perch Ext, il suo plugin e GMap, ci forniscono già una base in cui tutto l'ambiente è configurato per partire e lavorare con un codice semplice e pulito.
<script src="js/Ext.ux.GMapPanel.js"></script>
<script src="js/gmap.js"></script>
Infine inseriamo un pulsante html che ci servirà successivamente nel codice javascript per attivare la mappa.
<input type="button" id="show-btn" value="CLICCA QUI PER VEDERE DOVE VIVO E ALCUNI DEI GRUPPI PER CUI LAVORO" />
Veniamo ora al codice javascript. Notiamo la riga consueta utile a dire al browser di partire a elaborare il nostro codice solo dopo che tutto l'ambiente risulta configurato, ovvero Ext.onReady.
Successivamente notiamo come si inserisce un oggetto pulsante in una variabile utilizzando la funzione Ext.get e l'attributo id del nostro bottone.
var button = Ext.get('show-btn');
A questo punto possiamo animare il nostro pulsante con un evento di click che verifica se l'oggetto che contiene la finestra di popup con la mappa esiste già o dobbiamo crearlo. Nel caso in cui non esista lo creiamo, altrimenti verrà lanciata solo l'istruzione show che troviamo alla fine del file che stiamo analizzando.
Per mostrare una finestra con una mappa, utilizziamo il codice fornito grazie al plugin mappanel di Ext. Una finestra diventa di tipo mappanel se inseriamo un attributo xtype uguale a mappanel.
In questa finestra inseriremo una serie di attributi che servono a dire che tipo di controlli desideriamo attivare sulla nostra mappa. Se vogliamo un controllo per lo zoom o meno, a che livello di zoom vogliamo far partire la finestra e dove vogliamo centrare la mappa di Google perché si visualizzino al meglio tutti i marker che andremo a inserire. Si chiama marker il simbolo di segnaposto che viene collocato su una mappa per segnalare un luogo.
items: {
xtype: 'gmappanel',
region: 'center',
zoomLevel: 6,
gmapType: 'map',
mapConfOpts: ['enableScrollWheelZoom','enableDoubleClickZoom','enableDragging'],
mapControls: ['GLargeMapControl','GMapTypeControl'],
setCenter: {
geoCodeAddr: 'via Franchini 29, Altedo, 40051 Bologna, Italy',
marker: {title: 'CASA'},
listeners: {
click: function(e){
Ext.Msg.alert('ALTEDO', 'Questa è la città in cui abito!.');
}
}
},
Possiamo notare come sia semplice associare un'azione quando si clicca su un marker e mostrare, per esempio, un codice HTML con dei link utili alla descrizione del segnaposto che abbiamo inserito, utilizzando l'attributo listeners tipico di Ext e associandolo all'evento click.
listeners: {
click: function(e){
Ext.Msg.alert('YOOX',
'Questa è la società presso cui lavoro.'+
'<br>Vai al sito di <a href="http://www.yoox.com"'+
' target="_new">YOOX</a>.');
}
}
Abbiamo visto quindi come elencare le nostre località preferite ed è semplice immaginare come si possa inserire facilmente in un sito una lista di luoghi partendo da questo esempio e personalizzandolo.
