Informaticando.NET un intorno web sull'informatica di Giorgio Borelli

Il protagonista è nuovamente lui Internet Explorer 8, nell'articolo precedente abbiamo visto un bug d'Internet Explorer 8 legato all'evento window.onload, questa volta però non si tratta di un bug Javascript nativo, piuttosto coinvole le API di Google Maps; alla dichiarazione di una nuova mappa di Google Maps viene mostrator un errore Javascript in Internet Explorer 8, compromettendo sempre la compatibilità cross-borwser della nostra applicazione web.

Anche in questo caso risolvere il bug è piuttosto semplice, andiamo a scoprire come fare. Prosegue...

Ancora una volta ci ritroviamo a parlare di un bug, nello specifico Javascript, che affligge la compatibilità cross browser d'Internet Explorer 8. In particolare facciamo riferimento alla funzione del DOM (Document Object Model) window.onload(), responsabile di gestire (handler) gli eventi al caricamento della finestra (window) del browser. Quando andiamo a definire uno script Javascritp con all'interno window.onload al quale assegniamo una funzione, questa non viene "invocata" al load della pagina in Internet Explorer 8, il tutto sembra apparentemente inspiegabile, poichè il metodo onload così definito funziona perfettamente con gli altri browser o versioni superiori di IE.

Risolere il bug di IE8 con window.onload è davvero semplice, andiamo a scoprire come fare. Prosegue...

Nel caso in cui nell'implementazione di una Google Maps siano presenti più segnaposto (marker), ai quali sono associati delle infowindow, si pone un potenziale problema di visibilità e navigabilità della mappa. Se implementato l'evento dell'apertura della infowindow al click sul marker, nel caso di molti marker, le infowindow rimangono aperte sovrapponendosi l'una con le altre, e rendendo di fatto impossibile la leggibilità delle informazioni esposte e della navigabilità della mappa stessa.

Un modo elegante per ovviare a questo problema, è permettere la chiusura automatica della infowindow (la finestra delle informazioni associate al marker) all'apertura di una nuova finestra ad un nuovo click su un altro marker. Questa funzionalità non è il comportamento predefinito che la Google Maps implementa (come erroneamente si potrebbe pensare); implementarlo però è relativamente semplice, basta usare un piccolo accorgimento e richiamare opportunamente il metodo "close()" della infowindow, andiamo a scoprire come fare

Prosegue...

Nell'articolo precedente abbiamo parlato di come fare Geocoding con Google Maps, ovvero ottenere da un dato indirizzo le coordinate geografiche di latitudine e longitudine. un'altra tecnica molto interessante, implementabile con le Google Maps è il Reverse Geocoding, l'esatto contrario del Geocoding, ovvero la possibilità di ricavare l'indirizzo dalle coordinate geografiche. Mettere appunto il reverse geocoding non è difficile, ed una volta capito come funziona il geocoding basta apportare delle semplice modifiche al codice per fare l'esatto contrario.

Ancora una volta per l'implementazione del Reverse Geocoding sfruttiamo le google geocoding API, andiamo a vedere come fare.

Prosegue...

Il Geocoding è un tecnica che consente di convertire l'indirizzo di una via, una piazza o più semplicemente del centro città, nelle corrispondenti coordinate geografiche di latitudine e longitudine. Per mettere appunto il geocoding anche questa volta le API di Google Maps ci vengono in aiuto fornendoci la classe geocoder che con facilità ci permette d'implementare questa funzionalità.

L'implementazione del Geocoding in Javascript non è difficile sfruttando le google geocoding API, andiamo a vedere come fare.

Prosegue...

Il mondo delle Google Maps è veramente ampio e completo, tantissime sono le funzioni e le opzioni possibili offerte da questo servizio, giunto alla versione 3, una delle ulteriori possibilità offerte dalle mappe di google agli sviluppatori, è quella di poter rendere trascinabile (draggable) il segnaposto (marker) e di aggiungere a questa azione eventi all'interno della mappa che ci consentono in tal modo di ampliarne il comportamento. Attivare il trascinamento del marker in google maps è davvero semplice, basta agire su una proprietà dell'oggetto marker, andiamo a scoprire come fare. 

Prosegue...

Gestire l'aggiunta di più segnaposto (marker) nella stessa Google Maps non è cosa difficile, le API V3 delle mappe di google mettono a disposizione una serie di oggetti veramente completi ed efficaci, per aggiungere pertanto più marker sulla mappa basterà sfruttare funzioni ed eventi delle API, mentre per la loro gestione, (ad es. cambio icona, titolo, posizione, etc. etc.), necessita di un piccolo workaround da parte nostra che prevede l'uso, ahimè!, di un array globale in Javascript contenitore dei nostri marker, la soluzione risulta comunque efficace, andiamo a scoprire come fare.

Prosegue...

Continuiamo a parlare di Google Maps, un'altra esigenza molto sentita dagli sviluappatori nella implementazione della mappa, è quella di gestire l'evento onmouseover quando si passa sopra ad un segnaposto (marker) presente  sulla mappa. L'effetto del cambio di colore o dell'icona del marker quando il mouse vi passa di sopra, amplifica e migliora la visibilità e la user experience nella navigazione della mappa di google.

Implementare tale funzionalità non è difficile, basta conoscere il funzionamento degli eventi nelle mappe di google ed un pò di Javascript, andiamo a scoprire come fare.

Prosegue...

Le mappe di Google, giunte alla versione 3, sono un servizio indispensabile in diverse web application, sempre più spesso le vediamo integrate in portali e siti web dei più svariati settori,  offrendo così all'utente un utilissimo strumento e servizio di localizzazione. Pertanto renderle efficienti e funzionali migliora notevolmente la navigation experience dell'utente. A tal proposito bisogna dire che Google Map associa la funzione di zoom allo scrolling del mouse, quando quest'ultimo è posizionato sulla mappa. Tale funzionalità, non sempre risulta comoda, spesso si scrolla la pagina e ci si trova invischiati con lo zoom non appena il mouse entra all'interno dell'area della mappa. Fortunatamente è possibile disabilitare (o abilitare) detta funzionalità molto facilmente, basta settare un parametro tra le opzioni di creazione della mappa, andiamo a vedere come fare.

Prosegue...

Javascript è un linguaggio di scripting lato client che ha permesso di fare un grosso passo in avanti nell'evoluzione delle pagine web, consentendo di passare dai semplici e spartani siti statici in puro html, a siti web dinamici ed interattivi, migliorando così l'esperienza di navigazione dell'utente rendendola anche più user friendly.

Ciò nonostante, essendo per l'appunto un linguaggio lato client, ovvero viene eseguito dal browser (il client) dell'utente, non è in grado d'interagire con il server e con i linguaggi lato server quali ad esempio ASP.NET, a meno di non usare dei trucchi che consentono di "superare" la natura stateless del web, quali ad esempio i cookies. Ci sono casi in cui per uno sviluppatore web risulterebbe davvero comodo, al verificarsi di un evento client side, quale potrebbe essere un comunissimo evento onclick su un link (tag a), poter passare allo scatenarsi di detto evento un valore dal client al server e trattarlo con un linguaggio server side, senza usare i macchinosi e più lenti cookies o altre tecniche simili.

Javascript ci viene in aiuto anche in questo caso, mette infatti a disposizione una funzione in grado di scatenare un PostBack della pagina web al verificarsi dell'evento onclick o di un qualsiasi altro evento client side con Javascript. Questa funzione prende il nome di __doPostBack, andiamo a scoprire nel dettaglio come funziona e quanto può risultare utile se usata correttamente.

Prosegue...