Qualche giorno fa vi ho parlato di dove è possibile reperire le coordinate esatte per inserire una mappa di Google nel vostro sito.
Oggi invece vi voglio spiegare come inserire una mappa partendo da zero.
PRIMO STEP - REGISTRATI PER AVERE LA KEY
Per prima cosa è necessario avere una key collegata al proprio sito. Per farlo è sufficiente andare qui: http://code.google.com/apis/maps/signup.html , inserire il proprio dominio, e avremo subito sia la chiave sia un esempio di come inserire la mappa nel nostro sito.
SECONDO STEP - INSERIAMO IL CODICE NELL'HEAD DELLA NOSTRA PAGINA
Apriamo la nostra pagina web, e nel tag HEAD inseriamo il seguente codice:
<script src="http://maps.google.com/maps?file=api&v=2&key=xxxxx" type="text/javascript"></script>
Dove "xxxxx" sarà la chiave che ci ha appena dato Google.
Subito sotto inseriamo il codice:
<script type="text/javascript">
function load() {
if (GBrowserIsCompatible()) {
var map = new GMap2(document.getElementById("map"));
map.setCenter(new GLatLng(37.4419, -122.1419), 13);
}
}
</script>
Dove i "numeri" all'interno delle parentesi saranno le coordinate del nostro indirizzo, che abbiamo calcolato grazie a www.addressfix.com, e 13 sarà il livello di zoom (0 è il minimo e 17 è il massimo).
TERZO STEP - INSERIAMO UN MARKER
A questo punto potremmo forse voler inserire un "segnalino" che indichi esattamente il nostro indirizzo sulla mappa.
Per fare ciò, aggiungiamo queste righe subito sotto a
map.setCenter(new GLatLng(37.4419, -122.1419), 13);
prima della chiusura delle parentesi grafe.
Ecco il codice:
// Crea un nuovo marker nel punto specificato con una descrizione HTML associata
function createMarker(point, description) {
var marker = new GMarker(point);
GEvent.addListener(marker, "mouseover", function() {
marker.openInfoWindowHtml(description);
});
return marker;
}
// Aggiungi il marker alla mappa
map.addOverlay(
createMarker(new GLatLng(37.4419, -122.1419), "La mia casa<br />Via Nazionale, 1<br />00000 Roma")
);
Con la prima funzione abbiamo creato la variabile marker, che è una nuova istanza dell'oggetto GMarker. Inoltre le abbiamo associato un evento: al passaggio del mouse si apre una "nuvoletta" con una breve descrizione, che può contenere anche tag HTML.
Con la seconda funzione aggiungiamo il marker creato alla mappa, passandogli anche stavolta le coordinate corrette, e di seguito il messaggio HTML che vogliamo visualizzare nella nuvoletta.
QUARTO STEP - IL BODY
Per finire modifichiamo così il tag BODY della nostra pagina:
<body onload="load()" onunload="GUnload()">
Finito!!!
Semplice vero?
Aggiornamenti dicembre 2008
- Attenzione! Ricordate sempre di inserire nella vostra pagina un div con id "map", nel quale verrà visualizzata la mappa di Google.
<div id="map"> </div> (preziosa segnalazione di Paolo) - LINK IMPORTANTI
- esempi ufficiali
- demo ufficiali
- documentazione ufficiale
- guida ufficiale per gli sviluppatori
- guida completa
55 commenti:
Manca un 5nto step :
Il layer dove apparira' la mappa (in questo caso con id Map). Esempio di codice formattato con css in linea:
<div id="map" style="width:500px;height:300px;border:1px solid white;"> </div>
Ciao Paolo
Hai perfettamente ragione...!
Grazie per la segnalazione!
Sarebbe possibile conoscere gli altri identificatori di evento?
"mouseover"
"click"
...
...
e se volessi tenerlo gia aperto il fumetto?
Grazie
Qui trovi un elenco pressochè completo degli eventi per Google Maps: http://econym.googlepages.com/gevent.htm
Per quanto riguarda la seconda domanda, dovrebbe essere sufficiente scrivere la riga "marker.openInfoWindowHtml(description);" fuori dal GEvent.addListener.
Ora non ho il tempo di provare, stasera provo a fare due demo e a linkarle.
Ciao!
Allora, ho preparato due demo. La prima riporta il codice che ho usato nell'articolo: info con mouseover.
La seconda presenta il fumetto già aperto: fumetto aperto.
Il codice da usare per il fumetto aperto è visibile nel sorgente della seconda pagina.
Un utile link con molti esempi: Google Documentation
PER GIANDOMENICO:
Ecco una demo con un link nel fumetto: http://www.neosite.it/mappa_info_link.html
volevo sapere come posso effettuare un collegamento da un fumetto e il risultato inserirlo nello stesso (vedi www.unito.it/maps/)
PER JP:
Ho visitato il sito che mi hai segnalato ma non ho visto neanche un fumetto nella mappa!
In compenso però ho visto che la mappa è stata realizzata da GEOCMS, e, nella mappa presente nel sito, effettivamente ci sono dei fumetti a tabs, con dei links. Però anche questi link mandano ad altre pagine web, non vengono caricati nel fumetto!
Ma tu nello specifico che tipo di risultato vorresti ottenere?
In ogni caso si tratta di lavorare di javascript. Ritengo sia sufficiente creare una funzione che aggiungere l'html al fumetto, e quindi associare questa funzione al link che inserisci nel primo html.
Se riesco posto a breve un esempio.
Ciao. Poi ho risolto da me girovagando su internet e trovando un esempio molto simile a quello che volevo fare io. Dal sito che ti avevo segnalato i fumetti ti escono solo se selezioni una voce (ad. es. Dipartimenti). Se in tale struttura ci sono più dipartimenti, ti esce una piccola lista dove scegliere, e poi i dettagli dello stesso dopo aver cliccato. Ma tu sai i comandi per impostare la larghezza/lunghezza del fumetto? Con firefox mi esce bene ed adattato, ma con IE7 mi esce enorme e lo vorrei rimpicciolire. Grazie.
Ottima descrizione. Volevo sapere: avendo più markers sulla mappa è possibile zoomare su ognuno di essi cliccando direttamente sul marker? Grazie.
Ciao Elisa, innanzitutto complimenti per il blog: l'ho trovato molto utile per la stesura del mio primo sito...
Ho utilizzato le info del post sull'inserimento di una mappa Google Maps nelle pagine web e non riesco a fare una cosa molto stupida: cambiare il font degli step del percorso richiesto. Mi puoi aiutare?
Grazie
Ciao
Ciao andrea,
il tuo problema per fortuna è di facile soluzione!
E' sufficiente impostare il tipo di font e la grandezza nel foglio di stile o direttamente nella pagina tramite css. E' importante dare queste proprietà al body, in modo che ogni elemento della pagina le rispetti.
Ti ho preparato un esempio, clicca qui.
Come vedi ho impostato il Courier come carattere, anzichè il Times New Roman standard.
Ciao!
PER JP:
Esistono diverse soluzioni per formattare il fumetto (tecnicamente info window) di Google Map.
Innanzitutto ti segnalo due script: Ewindows (esempio) e PDMarker (esempio).
Sinceramente non li ho provati, ma gli esempi mi sembrano buoni!
Esistono poi altre soluzioni. Ad esempio danmarvelo.us in questo link spiega come personalizzare il fumetto di google. Vedrò in futuro se riesco a testare il codice proposto.
Un'altra soluzione semplice ma efficace è quella proposta da netmag, che vi esporrò in un prossimo post.
La perfezione di questa "tecnica" viene raggiunta in questo sito, che vi consiglio di guardare.
ho fatto tutta la procedura e offline funziona tutto ma quando carico il sito on line mi da errore e dice di ricreare un'altro codice API poichè quello che ho è utilizzato da un altro sito.
rigenero l'api ma mi da sempre lo stesso errore.
L'api l'ho caricata solo nella pagina web dove andrà la cartina.
Cosa devo fare?
Ciao lobo69,
quello che scrivi mi sembra un po' confuso.
Se ti dà un errore di API key, devi semplicemente andare qui: http://code.google.com/apis/maps/signup.html e ottenere una API key per l'esatto dominio in cui vuoi utilizzare la mappa.
Il fatto che ti funzioni in locale e non online significa che non hai ottenuto la key per quel dominio.
Rigenerare o caricare l'API può significare tutto e niente :)
Per GervaWeb.
Non apprezzo molto che si usi il mio blog per fare pubblicità alla propria azienda, comunque la risposta alla tua domanda è tra gli esempi proposti da Google.
GervaWeb, senza cattiveria, ma cancellerò tutti i post contenenti parole senza senso che servono solo a posizionare siti esterni a questo blog. Mi riferisco alla prima parola di ogni tuo post :)
Spero comunque di rivederti qui sul blog!
OK...
ma GW non è ASSOLUTAMENTE un mio sito e nemmeno sapevo che ne esista uno con questo nome.
E' solo la mia forma di salutare navigando in web, invece di dire buon giorno è mia abitudine salutare con GW come mi sembra logico, visto l'ambiente ove mi trovo.
Ciao a tutti
Io volevo chiedere un'info...
come faccio a far aprire automaticamente il fumetto del marker che contiene non solo testo ma anche informazioni ed immagini e a centrarlo??
vi linko un esempio della mia mappa:
http://www.friscoshop.it/mapparailway.html
Grazie mille.
Complimenti per il blog
Molto utile questo argomento!
Ciao
Davvero complimenti...la tua guida
mi è stata di grande aiuto...
una domandima,tanto per complicare le cose...se volessi implementare nel fumetto le diciture standard del tipo:
"A qui" oppure "Da qui" e si apre un campo dove digitare la partenza e calcola il percorso in automatico? ho visto siti che lo fanno è possibile?
grazie in anticipo
Nadia
Una domanda forse sciocchissima ma ho un problema che mi affligge tutto funziona perfettamente visualizzando con FIREFOX ma se apro con Iexplorer viene visualizzata solo la cornice e null'altro. C'è qualche inesattezza che commetto o una sorta di incompatibilità??
X Railway: per inserire informazioni e immagini nel fumetto, è sufficiente inserirle nel codice html (es. < img src="http://www.miosito.it/immagine.jpg" alt="Immagine"...); per centrare la mappa devi modificare le coordinate in map.setCenter(new GLatLng(37.4419, -122.1419), 13)
X Nadia: sì credo sia possibile ma non l'ho mai fatto, provo ad informarmi!
X Marcello: nessuna incompatibilità con nessun browser, semplicemente IE blocca il codice javascript di default.. è sufficiente consentire gli activeX per visualizzare la mappa
buondì. la guida mi è stata di grandissimo aiuto. ottima. in pochi minuti ho aggiunto la mappa al sito a cui sto lavorando. ma. avendo ricordi sfuocati di javascript. come si fa ad inserire più markers nella stessa mappa? ovvero quale parte di codice devo modificare? probabilmente è una domanda stupida. mi rendo conto. ringrazio anticipatamente.
lorenzo.
Sono anch'io interessato alle voci "da qui" "a qui"... Come si potrebbe fare per implementarle sulla struttura che ci hai illustrato?
Danilo, purtroppo in questi ultimi mesi non riesco a seguire molto il blog, comunque nella documentazione ufficiale di google puoi trovare codice ed esempi:
Codice per creare itinerari
Esempio 1
Esempio 2
Vi segnalo questo sito da cui potete scaricare gratuitamente dei bellissimi marker / marcatori vettoriali per google maps!
X Lorenzobld: ecco ti ho preparato un esempio di come mettere due markers nella stessa mappa
http://www.neosite.it/mappa_2_markers.html
scusami elisa, intanto complimenti davvero per il blog molto bello poi volevo avere se possibile un'aiuto per inserire la mappa sul sito. Io ho seguito passo passo quello che hai scritto ma non riesco a far visualizzare la mappa all'interno del sito. Potresti darmi una mano? ti posto l'indirizzo dove dovrebbe essere la mappa: LINK
La parte di codice del javascript deve terminare con il tag di chiusura /script e non con /script"
lo avevo già corretto quel problemino ma nulla ugualmente. Le sto provando tutte ma non so che dire.
Comunque grazie Luigi.
Ciao tonetto,
ho dato un'occhiata al tuo codice, prova a correggerlo così:
function load() {
if (GBrowserIsCompatible()) {
var map = new GMap2(document.getElementById("map"));
map.setCenter(new GLatLng(40.2556, -17.9106), 13);
// Crea un nuovo marker nel punto specificato con una descrizione HTML associata
function createMarker(point, description) {
var marker = new GMarker(point);
GEvent.addListener(marker, "mouseover", function() {
marker.openInfoWindowHtml(description);
});
return marker;
}
// Aggiungi il marker alla mappa
map.addOverlay(
createMarker(new GLatLng(40.2556, -17.9106), "Chalet del Mare
Via Spinoza Baruch, 5
73010 Porto Cesareo LE");
}
}
Ciao Luigi, grazie per la segnalazione, non so come ci fossero finite quelle virgolette lì dentro ^_^ !!!
elisa il problema non riesco a risolverlo. Ho tolto il maker e si vede solo il solido della mappa completamente vuoto all'interno.
Copiando lo script da qui si vede. Nel momento in cui cambio le coordinate di nuovo nebbia...
Non so che fare.
Non funziona nemmeno con il codice che ti ho preparato?
Prova ad usare coordinate con solo 4 decimali, e separale con la virgola e non con il punto e virgola.
grazie mille elisa ho risolto il problema diversamente.Sono andato sul sito della google e tramite il loro wizard sono riuscito a inserire il codice html creandolo direttamente sulla loro pagina (inserendo le coordinate il maker e la visualizzazione direttamente).
Comunque ti ringrazio moltissimo senza il tuo aiuto non ci sarei arrivato. thanks!!!
E' sempre bene ciò che finisce bene! Ciao!
ciao Elisa, nella costruzione di un sito mi è stato di aiuto il tuo piccolo tutorial per l'inserimento di una mappa di google.....ma ho trovato più comodo inserire il link alla mappa attraverso "iframe"..
grazie e ciao
Giuliano
ciao elisa..ho trovato molto utile questo blog, però ho un piccolo problema, non sono molto esperto e dopo aver fatto tutta la procedura quando apro la pagina internet dove ho inserito il google maps mi da il seguente errore: La richiesta è stata rifiutata dal server API di GoogleMaps. Imposta il parametro "sensor" specificato su "true" or "false". magari per voi è una scemenza ma io non saprei proprio come fare :-) grazie in anticipo.
Mattia
Ciao Elisa
complimenti per le utilissime tue indicazioni.
Solo una cosa: come faccio a sostituire in una googlemaps l'icona dei markers ?
Se la trovo già "confezionata" (ho visto che è laborioso crearla ex-novo) e la salvo in locale o sul server qual'è il codice ?
grazie, ciao
@anonimo
Ti lascio il link dell'esempio ufficiale, guarda il codice che usano per cambiare il marker di default: http://code.google.com/intl/it/apis/maps/documentation/examples/icon-simple.html
@antonio
L'errore che ricevi è molto strano, sicuro di aver seguito bene la procedura?
Ciao Elisa, innanzitutto complimenti x lo splendido blog. Ho un problema con le tabs nella infowindow: come si fa a stabilire la width delle label? Non riesco a venirne a capo.
Grazie mille
Qualcuno potrebbe dirmi come visualizzare la mappa IBRIDA?
Grazie per l'ottima guida!
Ciao, grazie per il tuo post.
E' stato ottimo per fare una paginina "DoveSiamo" in 2 minuti.
Tra l'altro ho trovato molto utili anche i link agli esempi e alle API che hai postato... Di sicuro se andavo a spulciarmi le api di google c'avrei messo almeno mezz'ora ;)
Grazie!
Ciao a tutti, ringrazio per il semplice tutorial, sono riuscito a creare la mappa.
2 domande:
vorrei farla apparire in stile "IBRIDO" e vorrei centrarla nella mia pagina web,Sharepoint 07 non me la fa centrare non so perchè. mi sapete dire come fare?
grazie mille
per chi volesse inserire un marker personale (dove prima crearsi l'immagine in PNG con sfondo trasparente), è questo :
// Crea l'icona personalizzata
icona = new GIcon();
icona.image = "images/marker.png";
icona.iconSize = new GSize(34, 30);
icona.iconAnchor = new GPoint(12, 30);
icona.infoWindowAnchor = new GPoint(21, 1);
spero di essere stato d'aiuto..
ciao ciao
grazie è sttao utilissimo!
si potrebbe anche inserire i tasti di scelta di visualizzazione della mappa (es.ibrido,satellite...) ?
grazie!
Grazie è stato utilissimo!
Ciao scusate ma io non ho capito bene il 3 step
"/Crea un nuovo marker nel punto" specificato con una descrizione HTML
ecco prima di tutto non sò cos'è un marker e poi come me lo creo?
Poi dinuovo in basso ce scritto
"// Aggiungi il marker alla mappa" cosa vuol dire?
X favore aiutatemiiii!!!!!!
Ciao Elisa, sto cercando di seguire le tue indicazioni ma non riesco a far funzionare la mappa. Il problema è che ho già nel tag body un onload() e se inserisco il nuovo perdo tutta l'impaginazione e non mi appare nemmeno la mappa.
Puoi aiutarmi?
Grazie mille.
Ciao, ho visto che hai trattato il tema delle voci "da qui" "a qui"...ma non sono riuscito nè a vedere gli esempi nè sono riuscito a capire come inserirli nella struttura.
Mi aiuteresti?
Ottimo articolo!
@nuzzo.a - puoi vedere un esempio qui: http://www.fight4fun.it/ cliccando sulla voce: MAPS
Spero di esserti stato d'aiuto...
Posta un commento