Add Google Maps (v2.1.1)

21 apr 2007

Nuova versione con reverse geocoding, mootools 1.2

Ecco a voi un javascript tutto completo per inserire le mappe di google in una pagina web. il codice risulta del tutto valido e in assenza di javascript attivato gli indirizzi risultano visibili.

Visualizza la demo

I campi modificabili per la personalizzazione della mappa sono:

apicode – apicode della mappa, si ricava dal sito della google
idfrommaps – ID del div di contenimento della mappa
mapscontroll – Controlli della mappa (0 – disattivo, 1 – piccolo, 2 – larghi, 3 – solo zoom)
mapsoptions – Tipologie della mappa, mappa satellite o ibrida ( 0 – disattivo, 1 – attivo)
mapscale – Scala della mappa (0 – disattivo, 1 – attivo)
mapsnavi – Navigatore in basso a destra (0 – disattivo, 1 – attivo)
mapscroll – Zoom della mappa con la rotellina del mouse (0 – disattivo, 1 – attivo)
zoomlevel – Livello iniziale di zoom (13 – citta, 16 – strada)
reversegeocode – Attiva il reverse geocoding (0 – disattivo, 1 – attivo)
error – Errori mappa (0 – disattivo, 1 – attivo)

Il codice html per utilizzarlo invece è:

<div id="map">
<div class="address">
<h3>corso vittorio emanuele II 11, Roma</h3>
<p>corso vittorio emanuele II 11, Roma</p>
</div>
<div class="latlong">
<p>41.895473,12.480597</p>
</div>
</div>

In pratica il javascript cerca determinati paragrafi di testo nel div indicato come contenitore della mappa.
Ci sono 2 classi da usare per questi paragrafi:

address – Paragrafo contenente un indirizzo, basta solo scrivere dentro l’indirizzo che si vuole segnare sulla mappa, il marker è di default
latlong – Paragrafo contente latitudine e longitudine per da segnare, non ha il marker di default (separare latitudine e longitudine con una ,)

Per attivare il codice inserire in onload:

GoogleMapsApi.init();

Per poter invece richiamare punti multipli o punti con la nuvoletta bisogna usare la seguente funzione javascript, anch’essa in onload appena sotto showmaps() oppure in un link, ma non direttamente nella pagina:

showAddress(indirizzo, marker, nome-tab, contenuto-tab, apertura);

La sintassi è la seguente:

indirizzo – indirizzo che si vuole evidenziare sulla mappa
marker – true/false – attiva il segnaposto grafico
nome-tab – nome della nuvoletta (richiede che marker sia true)
contenuto-tab – testo della nuvoletta (richiede che marker sia true)
apertura – true/false – apertura della nuvoletta in automatico (richiede che marker sia true)

Il codice javascript contiene tutta la spiegazione per usarlo:

Versione 2 – richiede mootools 1.2

Scarica Add Google Maps V2

Versione 1 – non richiede mootools, non più supportata

Scarica Add Google Maps V1

27 commenti

dok dice:

28/10/2007 alle 11:52

this one is simple & nice.

website »

Angelo dice:

1/07/2008 alle 10:11

Ciao Eduardo, sono il solito Angelo di vivarovere. L’ altra volta, quando mi hai aiutato, mi sono un po’ riguardato questo sito, ed ho trovato utile questo javascript di google maps. Vorrei inserirlo in una Pagina di Wordpress… come faccio? Io ho preso il js e uploadato nella root, editato l pagina inserendo il codice che hai indicato. Come previsto, non funge. Potresti darmi qualche istruzione aggiuntiva? Grazie

1/07/2008 alle 10:15

Ah, considera che la mia è una situazione un po’ particolare… Il dominio è hostato su dreamhost, ho fatto una installazione one-click easy di wordpress, il che vuol dire che sul mio spazio web non è stato installato alcun file. Non so se questo può fare la differenza..

Eduardo dice:

1/07/2008 alle 12:38

Usarlo è semplice:
1. Includi il codice con il tag <script type=”text/javascript” src=”tuolinkdeljs”></script>
2. Aggiungi all’onload showmaps(); se non ne hai uno inseriscilo sotto l’inclusione usando window.onload
3. Metti il codice html (l’indirizzo metti quello che vuoi, ma cerca su maps.google.it quello preciso che ti serve) che c’è nella pagina sopra, et voilà, se hai fatto tutto giusto la mappa funzina automaticamente. Aggiungo solo che i P interni possono essere uno o più di uno senza problemi. Non devono essere per forza quelli che ho scritto io.

marco dice:

8/07/2008 alle 15:58

Scusa la stupidità ma non ho capito come usare il seguente codice:

“showaddress(indirizzo, marker, nome-tab, contenuto-tab, apertura);”

Grazie per la pazienza

8/07/2008 alle 19:58

E’ una funzione js. Ecco un esempio dell’uso:
<script type=”text/javascript”>
showaddress(‘Viale degli Eroi di Cefalonia, 00128 Roma’,true,’info’,'testo nuvola’,true);
</script>

9/07/2008 alle 11:43

showaddress(‘Viale degli Eroi di Cefalonia, 00128 Roma’,true,’info’,'testo nuvola’,true);

questo lo sapevo ma non funziona prova ad inserirlo nella tua pagina di demo così che possa verificare dove sbaglio, io trovo il tuo blog molto interessante e completo GRAZIE

10/07/2008 alle 20:38

E’ stato un mio madornale errore. la funzione è showAddress, con la A maiuscola. Ultima raccomandazione, se hai messo showmaps() in onload, anche questa va in onload, o al massimo in un link.
Non come ti ho scritto sopra con il tag script nella pagina.

P.S.
Ho anche aggiornato la demo per far capire meglio.

11/07/2008 alle 11:56

Ok adesso ci siamo come ti dicevo grazie ancora per il tuo ottimo lavoro, spero di potermi rivolgere a te anche in futuro sei una persona molto gentile, buon lavoro hai un ottimo blog, e sei tempestivo nelle risposte.

11/07/2008 alle 21:36

Grazie molto gentile. E’ per questo che tengo il blog no?

Add Google Maps 2.1: reverse geocoding – The Developer Inside dice:

14/11/2008 alle 12:28

[...] e Scarica add google maps 2.1 go – inserisci tu il primo commento tags: Javascript, Released, Resources, tDi lascia un commento [...]

Dante dice:

6/12/2008 alle 17:46

Ho provato il codice, ma senza inserire anche mootool.js non va, è giusto, oppure sbaglio qualcosa?

8/12/2008 alle 11:28

Puoi usare la versione 1, ho appena aggiunto il link , se vuoi usarla senza mootools, altrimenti la versione 2 ne richiede l’uso.

Comunque la versione 1 non è più supportata e ha degli errori, per questo consiglio la versione 2.

Fabio Pegorari dice:

28/02/2009 alle 18:34

Per farlo funzionare su mootools 1.2 basta pochissimo:

cambiare le funzione getText() in get(‘text’).

Grazie Eduardo!

http://pastie.org/403134

28/02/2009 alle 18:35

ah, per la precisazione, nelle linee 140 e 142!

1/03/2009 alle 12:07

Grazie Fabio, non l’avevo proprio testato con la 1.2. Aggiornato alla versione 2.1.1.

nicola dice:

21/04/2009 alle 04:34

ciao, con firefox tutto ok.
ma con internet explorer 7 non funziona l’ onload() se invece ho il link e clicco su
javascript:GoogleMapsApi.showAddress(….)
allora va. ma al load no.
mi sai aiutare
ciao grazie Nicola

21/04/2009 alle 04:35

notifica aggiornamento post.
grazie
nicola

Federico dice:

2/05/2009 alle 19:12

ciao, sto usando la versione con mootools ma ho il seguente problema: non funziona sempre ed il problema sta nel fatto che nella stessa pagina uso altri javascript per visualizzare delle foto (http://fancy.klade.lv/home) più precisamente in una delle tre “librerie” che fancybox mi chiede di usare (jquery-1.3.2.min.js).

Se includo quel file il tuo codice non gira, ma se lo escludo non mi carica le foto :S

Qualche idea? Anche se hai una minima idea va bene, è giusto per sapere in che direzione guardare.

grazie, ciao

2/05/2009 alle 19:17

Mootools e JQuery cozzano a vicenda. Hai usato il comando jQuery.noConflict() di JQuery?
Se no in questo link trovi come fare: http://docs.jquery.com/Using_jQuery_with_Other_Libraries

2/05/2009 alle 19:30

heheeh l’ho giusto scoperto dopo aver fatto “commenta!” … tipico se aspettavo 5min non ti rompevo le balle adesso vediamo di sistemare, grazie ciao

4/05/2009 alle 16:24

@ nicola
Non l’ho provato con IE7 per motivi semplici (ho un Mac! ). Appena effettuo un test e inquadro il problema aggiorno il JS.

Alex78 dice:

4/08/2009 alle 15:07

Ciao, sto usando mootools-1.2.1-core.js con google_maps_api.js Funziona tutto ma vi risulta che il massimo degli indirizzi renderizzati siano 10?
In pratica pur avendo

MilanoMilano
TorinoTorino
RomaRoma
….
etc
…

visualizzo correttamente solo i primi 10 contenuti dei tag address.

4/08/2009 alle 15:09

…ovviamente mi ha zappato i tag “div” dove c’è scritto
MilanoMilano
TorinoTorino
RomaRoma

5/08/2009 alle 21:20

@Alex78
Google effettivamente ha dei limiti sulle richieste, ma sul numero di indirizzi effettivamente non ne conosco. Cerco e vi faccio sapere.

6/08/2009 alle 08:44

@Eduardo
Grazie!
Aspetto tue

Vincenzo dice:

9/12/2009 alle 14:57

è normale che usando latlong non mi prende il testo nell ? ho solo il marker rosso ma se ci clicco non fa nulla

ps: è possibile modificare il marker con uno personalizzato?

The Developer Inside