Add Google Maps (v2.1.1)

Javascript Apr 21, 2007

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


Tags

Great! You've successfully subscribed.
Great! Next, complete checkout for full access.
Welcome back! You've successfully signed in.
Success! Your account is fully activated, you now have access to all content.