The Developer Inside

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