Fare Geocoding con Google Maps

Giorgio Borelli

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...

Categorie: Google | Javascript

Tags: , ,

Rendere trascinabile (draggable) un marker sulla Google Maps

Giorgio Borelli

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...

Categorie: Google | Javascript

Tags: , ,

Come gestire più marker in Google Maps

Giorgio Borelli

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...

Categorie: Google | Javascript

Tags: , ,

Cambiare l'icona del marker al mouseover in Google Maps

Giorgio Borelli

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...

Categorie: Google | Javascript

Tags: , ,

Disabilitare lo zoom delle Google Maps durante lo scrolling del mouse

Giorgio Borelli

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...

Categorie: Google | Javascript

Tags: , ,

Scatenare un PostBack da un evento Javascript con la funzione __doPostBack

Giorgio Borelli

Scatenare un PostBack con la funzione Javascritp __doPostBackJavascript è 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...

Categorie: ASP.NET | html | Javascript

Tags: , ,

Impostare altezza div con Javascript

Giorgio Borelli

Impostare l'altezza di un elemento div con JavascriptIl tag <div>, in html rappresenta un blocco per ragruppare e separare i contenuti di una pagina html. Secondo il block model, a differenza del tag <span> esso non è un elemento block inline, ossia qualsiasi altro elemento che vi sta affianco viene automaticamente riportato a capo, poichè esso occupa tutta la linea del documento (a meno di non specificare diversamente). Il tag div, viene usato in maniera massiccia nella realizzazione delle pagine html, sia come raccoglitore di contenuti che come blocco per il layout web, sopratutto in quei layout table less (che non fanno uso di tabelle) così consigliati dai più recenti standard web. L'elemento div può contenere qualsiasi altro elemento e testo, e nei siti dinamici assume un ruolo fondamentale, poichè in larghezza è un elemento block, come detto manda a capo gli altri elementi a seguire fuori dal div, in altezza invece ha la proprietà di adattarsi al contenuto che esso contiene, il chè lo rende utilissimo a questo scopo, ovvero nell'uso dei layout per siti con contenuti dinamici.

Allo stesso modo, possono nascere esigenze che il div abbia un'altezza fissa, impostata magari tramite una regola di stile, proprio per adattarsi bene al layout della pagina web e/o per una migliore resa grafica, come fare allora se il contenuto del div cambia dinamicamente o la sua altezza deve variare a seconda della pagina che navighiamo?

Siamo "costretti" a cambiare "al volo" l'altezza del div. Possiamo impostare l'altezza del div in due modi, o con i fogli di stile (css), o tramite Javascript; in questo articolo andiamo a scoprire come fare usando Javascript.

Prosegue...

Categorie: CSS | html | Javascript | Web Design

Tags: , ,

Bloccare i PopUp e i PopUnder

Giorgio Borelli

le fastidiose finestrelle popup e popunder disturbano la naviagzione web, come crearle e come bloccarleI popup sono quelle fastidiose finestrelle che vi compaiono come per magia nel bel mezzo del vostro desktop mostrandovi ogni sorta di pubblicità e messaggio durante la vostra naviagazione web. Le finestre popup mostrano messaggi pubblicitari invadenti e fastidiosi che disturbano in maniera pesante la navigazione web degli utenti (oltre ad irritarli :)).

I popunder sono come i popup, solo che a differenza di quest'ultimi non compaiono davanti la finestra del browser ma bensì dietro, in modo tale che l'utente non si accorga immediatamente della loro presenza, e quando chiude il browser dopo aver terminato la propria navigazione web, si ritrova con una serie di finestre pubblicitarie non sapendo più quale sito le abbia aperte, e se non ha cognizione di cosa siano, può più facilmente cadere nel tranello di cliccarci sopra.

I popup ed i popunder appartengono alla categoria dei messaggi pubblicitari, solo che al contrario dei classici banner facili da riconoscere ed evitare, sono molto più subdoli ed ingannevoli, compaiono senza che noi li abbiamo chiesti, disturbano la navigazione web e sono fonte di potenziale pericolo poichè spesso rimandano a siti pornografici o siti di hacker, dove è facile beccarsi qualche malware.

Le finestrelle popup però non sono tutte dannose, alcune volte vengono usati da determinati siti web per mostrare finestre per effettuare ulteriori operazioni, invio e-mail o mostrare annunci legittimi, il tutto col fine di facilitare e migliorare la navigazione dell'utente.

Andiamo a scoprire in questo articolo cosa ci stà dietro, come creare i popup, come bloccare i popup e come consentire solo ai siti leggittimi di mostrare i propi popup.

Prosegue...

Categorie: Sicurezza Informatica | Web

Tags: , ,

CSS: pseudo class hover IE6 bug fix

Giorgio Borelli

Internet Explorer 6 non interpreta correttamente la pseudo class hover come regola nei fogli di stileCome visto anche nell'articolo precedente, la compatibilità Cross Browser ha un'importanza fondamentale nella realizzazione e nel successo di un sito web.

Visto e considerato che non tutti i browser interpretano correttamente ed allo stesso modo i tag HTML, e soprattutto se ne infischiano delle direttive del W3C (almeno nel passato), i Web Designer si ritrovano a dover risolvere problemi di compatibilità grafica tra i vari browser a dir poco ostici. Non solo abbiamo un elevato numero di browser, ma questi si moltiplicano ancora per le loro varie versioni, e riuscire a far vedere bene un sito con tutti, credetemi, è un'impresa faraonica se non impossibile. Comunque noi non ci scoraggiamo ed oggi cerchiamo di rendere la vita più facile agli sviluppatori web parlando di come risolvere (Fix) un bug dell'odiatissimo Internet Explorer 6 (ed anche IE5.5).

Il bug in questione riguarda la non corretta interpretazione della pseudo class hover in Internet Explore 6 e versioni precedenti.

Prosegue...

Categorie: CSS | Web Design

Tags: , , , , , ,