|
Inserire una Google map e un campo di ricerca nel sito |
![]() |
![]() |
Creare una mappa sfruttando le API di Google è davvero molto semplice, richiede pochissimo sforzo e nessuna conoscenza di javascript. Esistono tante guide in rete ma probabilmente la più chiara è quella ufficiale . Cercherò di riassumere i principali passaggi per ottenere questo risultato. Procurarsi una API keyLa prima cosa da fare è procurarsi una key. Per chiedere una API key è necessario inserire l'indirizzo del sito nel form in fondo a questa pagina. Individuare le coordinate sulla mappaPer poter centrare una mappa in un punto preciso, dobbiamo procurarci le coordinate. Andiamo su mapki e, aiutandoci eventualmente con lo zoom, clicchiamo nel punto desiderato. Latitudine e longitudine appariranno nella parte bassa della pagina. Nell'esempio ho creato una mappa di Napoli. Mapki mi aveva fornito le coordinate
Non è necessario usare tutte le cifre dopo il punto. Di solito tre sono sufficienti. Il javascriptNell'head occorre inserire due script. Il primo si riferisce alla Google maps Api key che ci siamo procurati all'inizio. <script src=http://maps.google.com/maps?file=api&v=2&key=LaTuaLunghissimaAPIkei type="text/javascript"></script>
Il secondo contiene le funzioni della mappa Ho inserito dei commenti nel javascript e credo che sia tutto molto chiaro. Vorrei solo evidenziare che è necessario personalizzare map.setCenter con le nostre coordinate. Inoltre, per ottenere risultati migliori, si può aggiustare lo zoom di GSize (riferito alla mappa rimpicciolita in basso a destra) e map.setCenter (riferito alle coordinate iniziali e, nella funzione showAddress, al risultato ricerca) Il bodyModificare il tag body come segue: <body onload="load()" onunload="GUnload()">
Infine inseriamo nella pagina il box di ricerca degli indirizzi e la mappa: <form action="#" onsubmit="showAddress(this.address.value); return false">
Nel div si possono personalizzare la larghezza e l'altezza della mappa. Riporto il link all' esempio e Download in formato .zip (non funziona senza la key API fornita da Google). |
|
Ultimo aggiornamento ( mercoledì 30 maggio 2007 ) |
In evidenza | ||
---|---|---|
|
Le più lette |
---|
Ricerca rapida |
---|
|