Add Google Maps (v2.1.1)

Eduardo Chiaro -

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)**