Add Google Maps
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.
Il codice javascript contiene tutta la spiegazione per usarlo:
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)
Il codice html per utilizzarlo invece è:
<div id="map">
<p class="address">corso vittorio emanuele II 11, Roma</p>
<p class="latlong">41.895473,12.480597</p>
</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:
showmaps();
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)
Scarica Add Google Maps
10 commenti
dok dice:
28 Ottobre 2007 alle 11:52
this one is simple & nice.
website »
Angelo dice:
1 Luglio 2008 alle 10:11
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
website »
Angelo dice:
1 Luglio 2008 alle 10:15
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..
website »
Eduardo dice:
1 Luglio 2008 alle 12:38
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.
website »
marco dice:
8 Luglio 2008 alle 15:58
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 dice:
8 Luglio 2008 alle 19:58
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>
website »
marco dice:
9 Luglio 2008 alle 11:43
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 dice:
10 Luglio 2008 alle 20:38
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.
website »
marco dice:
11 Luglio 2008 alle 11:56
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 dice:
11 Luglio 2008 alle 21:36
Grazie molto gentile. E’ per questo che tengo il blog no?
website »