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 http://www.farmapet.it/886-farmacia 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

this one is simple & nice.

Angelo

on

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 🙂

Angelo

on

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

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

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

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

Grazie per la pazienza

Eduardo

on

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>

marco

on

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

Eduardo

on

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.

marco

on

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.

Eduardo

on

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

Dante

on

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

Eduardo

on

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

Per farlo funzionare su mootools 1.2 basta pochissimo:

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

Grazie Eduardo!

http://pastie.org/403134

Fabio Pegorari

on

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

Eduardo

on

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

nicola

on

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

nicola

on

notifica aggiornamento post.
grazie
nicola

Federico

on

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 🙂

Federico

on

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

Eduardo

on

@ 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

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.

Alex78

on

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

🙁

Eduardo

on

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

Alex78

on

@Eduardo
Grazie!
Aspetto tue

Vincenzo

on

è 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

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

Eduardo

on

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

Sergio

on

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è 🙂

  1. 1
  2. 2

leave one