CescoBlog » CSS

Google Maps API: “Calcola il percorso” nel nostro sito

Francesco Paggin — Tue, 03 Nov 2009 21:05:40 +0000

Come molti di voi sapranno Google mette a disposizione per la maggior parte dei propri prodotti una serie di strumenti per sfruttarne le potenzialità nei nostri progetti.
Google Maps non fa eccezione e ci fornisce tutti gli strumenti (API) per sfruttare le mappe di Google nei nostri siti tramite Javascript.

Una delle funzionalità più utili è quella di poter calcolare il percorso ottimale per raggiungere un determinato luogo, ottenendo tutte le indicazioni sulle svolte e sulle strade da percorrere. Non molti sanno che queste funzionalità sono a disposizione degli sviluppatori per integrarle nei propri progetti, ed è proprio ciò che faremo.

Demo

Ipotizziamo di voler integrare nel nostro sito una comoda sezione “Come raggiungerci”, dove l’utente possa inserire la propria posizione ed ottenere il percorso per raggiungerci.

La nostra pagina quindi sarà composta da un breve form dove l’utente inserirà la posizione, la mappa dove verrà visualizzato il percorso e l’area in cui verranno visualizzate le informazioni:


	
		Da dove parti?

Com’è facile intuire la mappà sarà inserita all’interno del div map, mentre le indicazioni all’interno del div route.

Ma veniamo alla parte Javascript. Per prima cosa è necessario procurarsi una API Key dal sito google:

http://code.google.com/intl/it-IT/apis/maps/signup.html

Una volta ottenuta la chiave possiamo includere il javascript di Google Maps:

Dove al posto di CHIAVE ci andrà la API Key fornita da Google.

Procediamo ora con lo script vero e proprio. Innanzitutto inizializziamo una serie di variabili vuote che conterranno gli oggetti di Google Maps che istanzieremo:

/* GOOGLE MAPS OBJECTS */
var home;       //Home GLatLng object
var map;        //GMap object
var directions; //Directions object
var marker;     //GMarker object

La prima funzione che andremo ad utilizzare sarà la funzione initialize() che come dice il nome preparerà tutto il necessario per far funzionare la mini-applicazione. Questa funzione dovrà essere richiamata al caricamento della pagina, ad esempio all’interno del tag body:

Ma veniamo al codice. Per prima cosa recuperiamo gli elementi html che ci servono tramite il metodo document.getElementById:

//Get html elements needed:
var mapPanel        = document.getElementById('map');
var directionsPanel = document.getElementById('route');
var submitButton    = document.getElementById('calcola');

Subito dopo invece definiamo il nostro punto base, nell’esempio sarà la nostra ipotetica sede:

//Home location:
home = new GLatLng(45.434629,12.337925);

Ora che abbiamo il necessario possiamo già istanziare la mappa che verrà visualizzata di default e mostrerà il punto base:

//Create a map:
map = new GMap2(mapPanel);
map.setCenter(home, 13);
map.addControl(new GSmallMapControl());
map.addControl(new GMapTypeControl());

Per prima cosa viene creato l’oggetto GMap2, cioè la Google Map, e viene associato al div#map (mapPanel). La mappa viene poi centrata in home, al livello di zoom 13 (qui possiamo procedere a tentativi, più piccolo sarà il numero e più superficie terrestre vedremo). Tramite le altre due righe andiamo ad aggiungere i controlli che ci interessano (in questo caso i controlli standard e quelli per il tipo di visualizzazione – satellite, mappa, ibrida).

Ora dobbiamo evidenziare il punto base, e lo faremo aggiungendo un marker:

//Create marker:
marker = new GMarker(home);
map.addOverlay(marker);

Al marker possiamo aggiungere un fumetto descrittivo, contenente ad es. l’indirizzo, che si apre al click:

GEvent.addListener(marker, "click", function() {
    marker.openInfoWindowHtml("Venezia
Piazza San Marco");
});

Il comando addListener serve appunto per associare il click sul marker all’operazione di mostrare un fumetto contenente una stringa html (tramite il comando openInfoWindowHtml).

Come ultimo passaggio preparatorio dobbiamo istanziare l’oggetto GDirections di Google, che ci servirà per calcolare le rotte:

//Create directions module:
directions = new GDirections(map, directionsPanel);

Ora che tutto è pronto dobbiamo preoccuparci di cosa fare quando l’utente premerà sul pulsante “Calcola”:

submitButton.onclick = function() {
    getRoute();
    return false;
}

Definiamo quindi la funzione getRoute():

function getRoute() {
	var userLocation = document.findRoute.partenza.value;
	from = userLocation;
	to  = home;

    directions.load("from: " + from + " to: " + to, {"locale":"it_IT"});
}

Questa non fa altro che leggere la posizione di partenza dal campo compilato dall’utente e assegnarla alla variabile from e associare il punto base alla variabile to.
La magia avviene infine nell’ultima riga, dove andremo a calcolare la rotta tramite il metodo load del nostro oggetto GDirections.

A questo andremo a passare due parametri: Il primo sarà una stringa contenente le indicazioni nella forma “from:INDIRIZZO_DI_PARTENZA to:INDIRIZZO_DI_ARRIVO” (esattamente a come faremmo nella casella di ricerca in maps.google.it). Il secondo parametro invece è un oggetto che ci permette di specificare varie opzioni, in questo caso la lingua italiana.

Se andiamo a testare il tutto, dovremmo vedere che, una volta scelto un indirizzo di partenza, automaticamente verrà generato un percorso, visualizzato correttamente nella mappa, e generato il percorso passo-passo con tutte le indicazioni. Semplice no?

Demo 1

Ora aggiungiamo qualche funzionalità in più. Per prima cosa vogliamo dare la possibiltà di calcolare anche il percorso di ritorno. Aggiungiamo quindi un checkbox con la dicitura “Calcola percorso di ritorno”:

Come arrivare

	
		Da dove parti?
		
	

	
		Calcola percorso di ritorno

Nel javascript, all’interno di getRoute, andiamo quindi a gestire il caso in cui si voglia invertire la direzione:

function getRoute() {
	var userLocation = document.findRoute.partenza.value;
	var reverse = document.findRoute.inverti.checked;

	if (!reverse) {
		//andata...
		from = userLocation;
		to  = home;
	} else {
		//ritorno...
		from = home;
		to = userLocation;
	}

    directions.load("from: " + from + " to: " + to, {"locale":"it_IT"});
}

Viene infatti controllato se la checkbox è selezionata oppure no, e in caso positivo vengono invertite le posizioni di partenza e arrivo.

Se visualizziamo l’esempio vediamo quindi che selezionando il checkbox le indicazioni saranno invertite, partendo dal punto base fino alla destinazione inserita dall’utente.

Demo 2

Come ultima personalizzazione andiamo a sostituire l’icona di default con una scelta ad-hoc. Per farlo ci avvaleremo dell’ottimo sito: http://www.powerhut.co.uk/googlemaps/custom_markers.php Il quale ci permette di caricare immagini in gif, jpeg e png per generare il corrispondente marcatore, completo di immagini e javascript.

Nel mio caso il risultato fornito è il seguente:

var myIcon = new GIcon();
myIcon.image = 'markers/image.png';
myIcon.printImage = 'markers/printImage.gif';
myIcon.mozPrintImage = 'markers/mozPrintImage.gif';
myIcon.iconSize = new GSize(65,190);
myIcon.shadow = 'markers/shadow.png';
myIcon.transparent = 'markers/transparent.png';
myIcon.shadowSize = new GSize(160,190);
myIcon.printShadow = 'markers/printShadow.gif';
myIcon.iconAnchor = new GPoint(33,190);
myIcon.infoWindowAnchor = new GPoint(33,0);
myIcon.imageMap = [4...0]; //omesso per questioni di spazio

Per poter utilizzare l’icona dobbiamo modificare leggermente la riga dove viene creato il marker:

//Create marker:
marker = new GMarker(home, {icon:myIcon});

Abbiamo infatti aggiunto l’opzione icon che permette di specificare quale icona utilizzare.

Se visualizzamo quest’ultimo esempio vedremo una simpatica icona al posto del consueto pallino rosso.

Demo 3

Sfondi semitrasparenti in CSS

Francesco Paggin — Fri, 30 Oct 2009 21:03:27 +0000

Una delle ultime tendenze del web è l’utilizzo di sfondi semitrasparenti. Per ottenere questo effetto non è sempre necessario ricorrere alle PNG trasparenti ma è possibile anche tramite i fogli di stile.

La proprietà che andremo ad utilizzare è l’opacità, che è possibile impostare tramite il parametro opacity: 0.5. Il numero, variabile da 0.0 a 1.0, indica il grado di opacità, dove lo zero corrisponde alla trasparenza e l’uno alla piena visibilità. Per impostare quindi uno sfondo semitrasparente è possibile utilizzare questa proprietà associata ad un colore di fondo. Non possiamo tuttavia utilizzarla direttamente nell’elemento che vogliamo rendere semitrasparente, perché l’opacità influisce direttamente anche sul testo, a scapito della leggibilità. Per risolvere il problema sono sufficienti un paio di DIV in più.

Demo

Ipotizziamo di avere un elemento, chiamato "box":


   Lorem ipsum dolor sit amet consectetuer...

Per il nostro esempio è necessario aggiungere due div:


   
   
      Lorem ipsum dolor sit amet consectetuer...

Come potete intuire dal nome, il primo servirà da sfondo per il secondo. In questo modo possiamo utilizzare l’opacità solo su quest’ultimo, senza andare ad intaccare il contenuto.

Passiamo al foglio di stile. Come prima cosa, impostiamo un CSS di base:

#box {
   width:600px;
}

.box-bg {
   background:#000;
   opacity:0.5;
}

.box-content {
   padding:10px;
}

Al box assegnamo soltanto ulna larghezza, mentre al box-content assegnamo un padding di 10px. Allo sfondo invece assegnamo un colore (in questo caso nero) e un’opacità al 50% (0.5 su scala da 0 a 1).

Ora però dobbiamo dire allo sfondo di posizionarsi sotto al box-content e di assumere le dimensioni grandi quanto l’intero box. Per farlo ricorriamo ai posizionamenti assoluti e alle dimensioni in percentuale. Ma procediamo con ordine.

Innanzitutto dobbiamo dichiarare position:relative il nostro box, cosicché gli elementi al suo interno si posizionino IN RELAZIONE al div stesso:

#box {
   width:600px;
   position:relative;
}

allo sfondo invece dobbiamo dire di posizionarsi indipendentemente sotto al contenuto, perciò dobbiamo dichiararlo position:absolute, mentre per fare in modo che sia grande quanto il box stesso imposto larghezza e altezza al 100%:

.box-bg {
   background:#000;
   opacity:0.5;
   position:absolute;
   width:100%;
   height:100%;
}

Ora non resta che posizionare anche il contenuto, semplicemente dichiarandolo position:relative. Gli elementi posizionati infatti "vincono" rispetto a quelli non posizionati e di default vengono visualizzati sopra questi ultimi. In questo modo invece il contenuto sarà sopra allo sfondo:

.box-content {
   padding:10px;
   position:relative;
}

Se visualizziamo l’esempio con un browser moderno (ie7, firefox, safari) vediamo l’effetto desiderato (ho inserito uno sfondo per contrasto):

Esempio 1

Naturalmente il problema sorge con IE. Innanzitutto la proprietà opacity viene ignorata, fortunatamente però esiste una proprietà analoga che fa uso del filtro Alpha di Internet Explorer filter:alpha(opacity:50). In questo caso l’opacità viene indicata da 0 a 100.

In secondo luogo in IE6 la proprietà height:100% non viene letta correttamente. Anche in questo caso una feature specifica di IE ci permette di simularne il comportamento. Possiamo infatti utilizzare la funzione expression che permette di eseguire calcoli stile javascript all’interno del css:

height:expression(document.getElementById("box").offsetHeight);

Come si può facilmente intuire questa imposta l’altezza dello sfondo uguale all’altezza esterna (offsetHeight) del box principale ( document.getELementById("box") ).

Il nostro CSS diventa quindi:

#box {
   width:600px;
   position:relative;
}

.box-bg {
   background:#000;
   opacity:0.5;   filter:alpha(opacity=50);
   position:absolute;
   width:100%;
   height:100%;}

.box-content {
   padding:10px;
   position:relative;
}

* html .box-bg {   height:expression(document.getElementById("box").offsetHeight);
}

il prefisso "* html " serve per far sì che quella proprietà venga utilizzata solo da IE 6, in quanto per i browser più recenti non esiste un elemento qualsiasi (*) padre dell’elemento html.

Ora quindi possiamo visionare l’esempio corretto fino a IE 6:

Esempio 2

Come ulteriore esempio ho utilizzato un’immagine al posto del colore, creando quindi un doppio sfondo:

Esempio 3

PNG Fix fai-da-te

Francesco Paggin — Thu, 25 Dec 2008 19:05:59 +0000

Il formato grafico PNG è estremamente interessante. La possibilità offerta dal supporto alle trasparenze è sicuramente la caratteristica più utile. Purtroppo solo gli ultimi browser supportano questa proprietà, e in particolare soltanto a partire da Internet Explorer 7 per quanto riguarda il browser di Microsoft.

Esiste comunque la possibilità di abilitare le trasparenze PNG anche per Internet Explorer 6 e precedenti attraverso vari plugin basati su javascript. In certe occasioni però l’effetto potrebbe servirci per solo un’immagine ed andare ad aggiungere javascript per così poco può essere superfluo.

In realtà tramite CSS e commenti condizionali possiamo intervenire utilizzando le stesse tecniche utilizzate dagli script javascript disponibili. E’ infatti possibile utilizzare i filtri inclusi in IE, in particolare "AlphaImageLoader", per ottenere il medesimo effetto.

Ma ipotizziamo di voler utilizzare uno sfondo semitrasparente per l’header di un sito. Il codice CSS normale, che farà uso del PNG, sarà una cosa del tipo:

Se andiamo a verificare con Internet Explorer 6 vedremmo però, al posto della trasparenza del PNG, uno sgradevole color grigio. La prima cosa da fare quindi è introdurre un commento condizionale per poter intervenire solo per i browser precedenti a IE7:

All’interno andiamo quindi a modificare lo sfondo dell’header, rimuovendo l’immagine:

Ora possiamo utilizzare il filtro di IE per reintrodurre l’immagine:

Come potete vedere passiamo al filtro due parametri: il primo è il sorgente dell’immagine, il secondo è il "sizingMethod", e cioè come l’immagine viene applicata all’elemento. Con l’impostazione "scale" l’immagine viene stirata fino a raggiungere le dimensioni dell’elemento a cui è applicata, mentre con "Crop" viene tagliata se supera le dimensioni dell’elemento.

Rispetto alla gestione normale degli sfondi non abbiamo possibilità di gestire né il posizionamento dello sfondo (background-position) né la sua ripetizione in verticale o orizzontale (background-repeat). Non è quindi possibile avere comportamenti particolarmente avanzati, tuttavia l’effetto è più che sufficiente per tecniche di image-replacement o per sfondi di elementi dalle dimensioni ben precise.

Come ultima cosa è però necessario ripristinare la corretta funzionalità dei link perché applicando i filtri Internet Explorer va a porre l’immagine PNG sopra agli elementi interattivi del sito, inibendo quindi la possibilità di clickare. Per sistemare il tutto però è sufficiente aggiungere la proprietà "position:relative" per portare il link sopra lo sfondo e quindi per renderlo nuovamente clickabile. Per farlo modifichiamo il CSS come segue:

Come vedete l’effetto è semplice da ottenere anche senza l’ausilio di apposite librerie e nel caso di una o due immagini può essere più comodo gestirle manualmente, risparmiando un po’ di bytes e di pesantezza di caricamento.

Footer sempre in fondo

Francesco Paggin — Wed, 05 Nov 2008 20:56:59 +0000

Il footer, per definizione, è quell’elemento che chiude la pagina e si pone alla fine dei contenuti. Quando però il contenuto è più corto dello spazio disponibile a video – il viewport – il footer si “solleva” dal bordo inferiore della pagina, lasciando uno spazio più o meno grande al di sotto di esso. L’effetto in certi casi può essere poco gradevole, dando l’impressione di un layout “tagliato a metà”. Potete vedere qui un esempio…

Il footer dovrebbe invece disporsi allineato al bordo inferiore della pagina nel caso citato, mentre dovrebbe posizionarsi in fondo al contenuto, oltre lo scroll, se questo è sufficientemente lungo da riempire tutto il viewport. Per farvi un’idea date un’occhiata qui e qui.

Una soluzione valida, compatibile con tutti i moderni browser, è quella di utilizzare la proprietà css min-height per imporre l’altezza minima del contenuto tale da farlo ampliare fino a riempire con il viewport.

Ma procediamo con ordine. Il layout standard potrebbe essere questo:


    container">
            
                 Header
            
           
                 Content
            
    
    footer">
        Footer

Tramite css impostiamo l’altezza minima del container al 100% in modo da farlo occupare tutto lo spazio verticale disponibile. L’altezza viene però calcolata in base a quella degli elementi contenenti il div, quindi dobbiamo impostare al 100% sia il tag body che il tag html:

html, body {
    height:100%;
}

#container {
    min-height:100%;
}

In questo modo però il footer andrà a posizionarsi fuori dall’area visibile (oltre il 100%, per intendersi): occorre quindi recuperare lo spazio necessario. Per farlo utilizziamo un semplice margine negativo pari all’altezza voluta del footer (in pixel o em, come preferite):

html, body {
    height:100%;
}

#container {
    min-height:100%;
    margin-bottom:-100px;
}

Ora però dobbiamo impedire al contenuto di finire sotto al footer che abbiamo portato in primo piano. Aggiungiamo perciò un padding inferiore al content in modo da distanziarlo a sufficienza: è importante quindi che abbia almeno lo stesso valore. Se vogliamo aggiungere un ulteriore spazio basta addizionarlo: (ad es. 110px per un padding inferiore apparente di 10px).

html, body {
    height:100%;
}

#container {
    min-height:100%;
    margin-bottom:-100px;
}

#content {
    padding-bottom:100px;
}

Se provate la pagina con un browser come Firefox o Safari noterete che abbiamo già ottenuto l’effetto desiderato. La proprietà min-height però non è supportata da Internet Explorer 6. Possiamo risolvere facilmente con il noto l’hack che utilizza la proprietà !important. Aggiorniamo quindi il css ed abbiamo finito:

#body {
    height:100%;
}

#container {
    min-height:100%;
    height:auto !important; /*per gli altri browser*/
    height:100%; /*per IE 6*/
    margin-bottom:-100px;
}

#content {
    padding-bottom:100px;
}

Ecco quindi l’esempio finito con poco o molto contenuto. Potete in alternativa scaricare lo zip con i sorgenti.
Ho aggiunto qualche altra istruzione per evidenziare header e footer, ma il css di base è lo stesso.