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](#marker) è di default
- **latlong** – Paragrafo contente latitudine e longitudine per da segnare, non ha il [marker](#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](http://sandbox.thedeveloperinside.com/googlemaps/google_maps_api.js)**
### Versione 1 – non richiede mootools, non più supportata
**Scarica [Add Google Maps V1](/wp-content/extra/googlemaps/google_maps_api.js)**