add google maps (v2.1.1)

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

in your opinion

dok

on Oct 28th, 2007 at 11:52

this one is simple & nice.

Angelo

on Jul 1st, 2008 at 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

on Jul 1st, 2008 at 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

on Jul 1st, 2008 at 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

on Jul 8th, 2008 at 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

on Jul 8th, 2008 at 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>

on Jul 9th, 2008 at 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

on Jul 10th, 2008 at 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.

on Jul 11th, 2008 at 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.

on Jul 11th, 2008 at 21:36

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

Add Google Maps 2.1: reverse geocoding - The Developer Inside

on Nov 14th, 2008 at 12:28

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

Dante

on Dec 6th, 2008 at 17:46

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

on Dec 8th, 2008 at 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

on Feb 28th, 2009 at 18:34

Per farlo funzionare su mootools 1.2 basta pochissimo:

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

Grazie Eduardo!

http://pastie.org/403134

on Feb 28th, 2009 at 18:35

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

on Mar 1st, 2009 at 12:07

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

nicola

on Apr 21st, 2009 at 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

on Apr 21st, 2009 at 04:35

notifica aggiornamento post.
grazie
nicola

Federico

on May 2nd, 2009 at 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

on May 2nd, 2009 at 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

on May 2nd, 2009 at 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

on May 4th, 2009 at 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

on Aug 4th, 2009 at 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.

on Aug 4th, 2009 at 15:09

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

on Aug 5th, 2009 at 21:20

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

on Aug 6th, 2009 at 08:44

@Eduardo
Grazie!
Aspetto tue

Vincenzo

on Dec 9th, 2009 at 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?

Sergio

on Jan 11th, 2011 at 12:43

Ciao Edoardo, trovo molto interessante il tuo blog come trovo molto interessante e utile questo script.
ho bisogno di un aiuto

scusa la banalità, ma non riesco a far funzionare la riga di codice showAddress, guarda questo indirizzo:
http://www.farmaca.com/it/saloni/saloni.asp?citta=milano

funziona benissimo e prende i parametri da un database (gran bello script!)

solo che vorrei personalizzare i marker con testi e una fotografia, ma non riesco a far funzionare lo showAddress,
intendo:
ho seguito le tue istruzioni nelle risposte, ma niente…
potresti aiutarmi mi rimane la mappa grigia…eccola:
http://www.farmaca.com/it/saloni/saloni2.asp

grazie molte

on Jan 11th, 2011 at 23:53

@Sergio:
guarda, hai semplicemente sbagliato un paio di punti.
1) basta solo 1 window.event load, cioè il primo:
window.addEvent(‘load’,GoogleMapsApi.init)
gli altri sono errori e generano la fine dello script.

2) la chiamata corretta per lo showmaps è:
GoogleMapsApi.showAddress(‘Viale degli Eroi di Cefalonia, 00128 Roma’,true,’testo nuvola’,true);
se vuoi farlo funzionare all’avvio va in un window.event load FUORI dal div map.

comunque se ti serve ho preso e corretto il tuo esempio qui: http://sandbox.thedeveloperinside.com/googlemaps/testing-google.html

Visualizza il codice della pagina e controlla le differenze con il tuo.
Ciao e buon lavoro.

on Jan 17th, 2011 at 21:55

Ciao Eduardo, grazie per la tua celere risposta, ho corretto secondo le tue istruzioni ed ora la pagina funziona correttamente estrapolando i dati dal db
http://www.farmaca.com/it/saloni/saloni.asp?citta=abbiategrasso

però ho ancora 2 domande da porti (scusami):

1. non riesco a capire perchè non si vede con IE8

2. come devo fare per cambiare l’immagine del marker di gmap

grazie Eduardo ti devo pagare il caffè

The Developer Inside

Versione 2 – richiede mootools 1.2

Versione 1 – non richiede mootools, non più supportata