Home » Webzine

Dove siamo con Google Maps

francesco leonetti

Questo articolo interessa chi si cimenta nello sviluppo di pagine web e siti.
Gli altri, arrivati ad un certo punto, potrebbero perdersi, anche se un corso EspertoWeb può sempre giungere in soccorso ;)

Quasi tutti i siti web in un modo o nell'altro offrono risposte alle primordiali questioni filosifiche che un visitatore tipicamente si pone quando lo consulta: chi siamo, dove siamo, dove andiamo,etc.

Da oggi almeno il dove siamo non è più un problema!
Grazie al servizio Google Maps, infatti, è possibile riportare sul proprio sito una piccola mappa interattiva, con tanto di marker cliccabili.


Qui ne vedete un esempio:


Per integrare una mappa del genere nel proprio sito è sufficiente, se già non lo si dispone, ottenere un account su Google, e quindi richiedere un codice di attivazione del servizio Google Maps associato al nome di dominio del sito in cui volete inserire la mappa. Nel mio caso il codice che ho richiesto è associato al dominio https://www.espertoweb.it.
Sia la registrazione su Google che il codice di attivazione sono gratuiti.

Ottenuto il codice di attivazione, bisogna sporcarsi le mani con il codice Javascript e HTML necessario per includere la mappa sulla vostra pagina. Questa è la parte più divertente. Ed è anche facile se volete limitarvi ad un mero copia-incolla.
Copiate infatti il codice seguente e mettetelo tra il tag <head> e </head> della vostra pagina:


<script src="http://maps.google.com/maps?file=api&v=2&key=codice_di_attivazione_google"
type="text/javascript"></script>
<script type="text/javascript">

//<![CDATA[
var latitudine = 41.23074230438426;
var longitudine = 16.301082372665405;
var zoom=16;
var messaggio="Ciao! Questo è il <a href=\"https://www.espertoweb.it\" target=\"_blank\">mio ufficio</a>!";
var debug=true;

function load() {
if (debug) document.getElementById("debug").style.display="block";
if (GBrowserIsCompatible()) {
var map = new GMap2(document.getElementById("map"));
map.addControl(new GSmallMapControl());
map.addControl(new GMapTypeControl());

if (debug) {
GEvent.addListener(map, "moveend", function() {
var center = map.getCenter();
document.getElementById("debug").innerHTML = center.toString();});

GEvent.addListener(map, "click", function(marker, point) {
if (point)
document.getElementById("debug").innerHTML = point.toString();});

}

map.setCenter(new GLatLng(latitudine, longitudine), zoom);

var point = new GLatLng(latitudine,longitudine);

var marker = new GMarker(point);
GEvent.addListener(marker, "click", function() {
marker.openInfoWindowHtml(messaggio);})

map.addOverlay(marker);

}
}

//]]>
</script>



Ho riportato in grassetto le parti che dovete variare.

In particolare:

- il codice di attivazione deve essere quello fornito da Google, tipicamente una stringa piuttosto lunga di caratteri criptati. Questa stringa corrisponde al nome di dominio del sito in cui la mappa deve essere inserita. Non può funzionare sotto altri domini;

- le coordinate di latitudine e longitudine del punto che volete marcare. Queste coordinate le potete ricavare da Google Earth, oppure da questo stesso esempio trascinando la mappa e zoomando indietro e avanti finché non individuate il punto desiderato. Notate che sotto la mappa ho fatto in modo che venga riportato il punto centrale della mappa dopo il trascinamento ovvero del punto in cui si è cliccato. Quelle sono le coordinate che dovete riportare. La visualizzazione di questi valori è condizionata dal valore attribuito alla variabile debug. Assegnando il valore false a questa variabile, non vengono mostrate le coordinate del punto, come in effetti dovrebbe essere quando la mappa viene ufficialmente pubblicata sul sito;

- il messaggio da visualizzare quando l'utente clicca sul marcatore del punto. Il messaggio, come vedete, può contenere a sua volta codice HTML.

Il tag <body> della vostra pagina web deve essere scritto così:


<body onload="load()" onunload="GUnload()">




Mentre nel punto della pagina in cui volete mostrare la mappa dovete inserire il seguente codice:

<div id="map" style="width: 500px; height: 300px"></div>
<div id="debug" style="display:none"></div>




Tutto qui.

Questa tecnica può essere applicata sia per realizzare efficaci contenuti per la pagina "dove siamo" dei vostri siti, sia per costruire learning object o giochi didattici. Ad esempio, si può chiedere di localizzare un particolare luogo di una regione o città e fornire un feedback al click sui vari "markers" posizionabili.

Ma come funziona?
Come vedete qui sono coinvolti tre linguaggi web: Javascript, CSS e HTML/XHTML.
Indovinate un po' come fare per capirne di più? ;)

comments powered by Disqus

I commenti precedenti

Baldo - 01/12/2011 18:15:47

Ottimo articolo, grazie!!

Mauro - 17/06/2010 16:20:22

Funziona perfettamente!
GRAZIE!!!

Sandro - 15/06/2010 12:16:08

Cosa devo modificare se voglio che al click in un punto della mappa, oltre ad estrarre le coordinate mi sposta il marker in quel punto?
Deve cancellarlo e ricrearlo in quel punto?
Ho fatto un pò di prove ma senza successo...

mattia caputo - 28/02/2010 17:41:34

scusami dovrei farti un paio di domande in privato... puoi contattarmi al mio indirizzo grazie sempre se hai tempo

mattia caputo - 28/02/2010 17:40:28

ho un paio di domande da farti in privato, se puoi contattarmi... ti lascio il mio indirizzo...

andrea - 31/12/2009 16:14:29

grazie francesco, tutto perfeto

angela casciani - 06/05/2009 19:54:32

Grazie,
lo utilizzo subito per indicare il mio istituto!

Giuseppe D'Apolito - 01/12/2008 11:33:41

Ottime dritte

cienframe - 11/08/2008 11:59:33

Grazie mille per le dritte: tuttavia nella mia pagina la mappa viene rappresentata larga ma stretta in altezza, come un rettangolo. Ho provato a modificare div ma non cambia nulla. Puoi aiutarmi?

bill gates - 01/08/2008 18:53:38

scusate la domanda poco elegante: ma quanto costa? non lo si legge da nessuna parte...
Risposta da fleo:
Caro Bill, e' gratis! :)

Dario Brambilla - 21/05/2008 03:06:04

Ciao!!Funziona quasi perfettamente!Io ho riadattato le misure del div map a 400 x 270 px..giusto per fartelo sapere, solo che quando apro il mio link che contiene la mappa...questa non mi viene centrata sul segnaposto e in più compare per un pezzo bianca e solo dopo che muovo la mappa io si vede tutto, ma cmq se ritorno in un certo punto compaiono ancora pezzi bianchi!e in più quando clicco sul segnaposto mi manda la mappa in alto e io la devo trascinare giù fino a vedere di nuovo il segnaposto!perchè??come faccio a risolvere?AIUTOOOOOOO!!T prego aiutamiiii!!

ps:se volessi modificare l'immagine del segnaposto!
GRAZIE 6 1 grande!

Massimo De Luca - 16/03/2008 19:35:23

Grazie mille.
Ce ne vorrebbero 1000 come te che aiutassero noi incapaci nell'HTML

Emanuele Falappa - 13/03/2008 07:53:33

Finalmento ho trovato quello che cercavo.... solo una cosa , come mai la mappa la vedo solo con Firefox? Con Explorer o Opera o Konqueror vedo solo il riquadro vuoto. Firefox da questo errore ma carica correttamente la mappa: marker is not defined
load()cart.php (line 42)
onload(load ).
L'indirizzo: http://www.bruggi.com/_mappa.php
GRAZIE!

Johannes Merconchini - 21/02/2008 11:10:40

Grazie mille. E' stata dura... non sono esperto, ma con il suo tutorial sono riuscito a fare quello che volevo. Buon lavoro.

Saro vaccaresi - 07/02/2008 22:48:16

Vado a zonzo e capisco che sono lontano dalla luce.
Chiedo, gentilmente, se potete darmi maggiori informazioni su google maps.
Mi necessita individuare, con bandierini o altro, dinamicamente città e indirizzi localizzati graficamente nella maps, credo che si debbano passare parametri indirizzi e città con querystring o form i quali si trovano nel mio database; vedi in alcuni siti come http://www.pagineutili.it/getListing.php)
E' possibile farlo con questo script sopra menzionato? Credo proprio di no, io l'ho provato, mi fa vedere solamente una mappa movibile con coordinate bò.
Dove e cosa non capisco? come posso arrivare al mio obiettivo?
Questo è il mio risultato ottenuto col Vs. script vedi www.officineveicoli.eu/mappe.asp.
Vi chiedo gentilmente se potete darmi una dritta visto che sono mentalmente scoordinato.

Risposta dal fleo:
quello che descrivi si chiama "google mashup" e consiste nell'integrare le mappe di google con dati e informazioni proveniente da altre fonti.
Per realizzare compiutamente un oggetto del genere, l'ideale e' padroneggiare il google mashup editor:
http://code.google.com/gme/
Lo script che ho presentato io e' una cosa molto ma molto piu' semplice. Si limita ad indicare una sola locazione.

Alain Bertani - 17/11/2007 19:20:41

Ciao, script da sogno. Ma una piccola domanda, se io volessi passare latitudine e longitudine come due parametri (ad es. due campi di un db) perchè ho più punti da visualizzare sulla mappa, come posso fare???
Mi spiego meglio, uso la mappa per localizzare diverse località in cui è presente una persona a seconda del periodo dell'anno, quindi ho diversi indirizzi. Cliccando sul calendario di gennaio vorrei visualizzare un lugo a febbraio un altro e così via. Un aiuto??? Grazie in anticipo

Marco - 03/10/2007 21:23:44

Ciao, grazie per le istruzioni!! è tutto chiaro e perfettamente funzionante!

ti chiedo solo un ultimo aiutino:
vorrei che il messaggio comparisse non al click del mouse ma appena ci passo sopra col puntatore!

ho provato a modificare
GEvent.addListener(map, "click", function(marker, point) {
in
GEvent.addListener(map, "onmouseover", function(marker, point) {

ma senza alcun risultato.. come posso fare??

Risposta da fleo: così come l'evento indicato nel "listener" è click piuttosto che onclick, allo stesso modo prova ad indicare mouseover invece di onmouseover. Ciao!

Mario - 23/06/2007 11:34:46

Ciao
complimenti per l'articolo e il codice perfettamente funzionante. Ho messo in pratica i tuoi consigli sulla pagina "http://www.hotelwindsorsavoia.it/it/frame_google.html"

Solo una domanda: come mai mi appare la scrollbar orizontale e non vengono settati i colori della scrollbar? Se tolgo l'intestazione "<!DOCTYPE html.....", allora i colori della scrollbar appaiono, ma le infoWindow che si aprono cliccando sui marker non vengono disegnate bene!

Sai quale può essere il problema?
Risposta da fleo:
Nel doctype hai definito come linguaggio di marcatura XHTML 1.0 strict. E' necessario dunque che la sintassi dei tag html rispetti quella definita dal linguaggio impostato.
Ad esempio i "br" devono essere scritti cosi': <br />
Circa le infoWindow, prova a specificare nei tag "img" anche gli attributi "width" e "height", in modo da anticipare l'ingombro richiesto per visualizzare tutto il contenuto del "balloon".
Ciao e buon lavoro!

Max Persico - 13/06/2007 19:19:20

Ciao Francesco,
è tardi e sto impazzendo per inserire qs benedetto script (grazie per essere stato così esauriente).
Il problema è che dopo 1000 prove, nel momento in cui inserisco i riferimenti del mio foglio css tutto salta e non capisco (forse sono troppo stanco) il perchè.
Mi potete aiutare?? Grazie in anticipo ;-)

le pagine in questione sono:
www.vipclubcortina.com/facilities.asp
(quella che non visualizza)
www.vipclubcortina.com/prova.asp
(la prova di visualizzazione)
non mi capisco...

Risposta da fleo:
Nella pagina di prova hai inserito correttamente anche il div debug, che invece nella pagina "vera" manca.
Prova ad inserirlo:

<div id="debug" style="display:none"></div>

adry - 06/06/2007 01:24:37

Ho personalizzato il codice.
Chi volesse l'esempio, commentato riga per riga mi scrivesse a nervo72@#NOSPAM#hotmail.com

Marco - 27/04/2007 16:47:39

non mi funziona,qualcuno potrebbe mettermi il codice dall'inizio alla fine della pagina?? GRAZIE

Vincenzo Cappai - 20/04/2007 12:29:27

Veramente funzionale, semplice e chiaro.
I miei complimenti.

Gianfranco - 13/04/2007 17:52:12

Articolo interessante, però manca un passaggio.
Hai scritto che le coordinate possono essere ricavate da Google Earth; ma come si convertono le coordinate ottenute per poterle utilizzare nel codice JavaScript?

Grazie

Cristian Sanelli - 23/03/2007 11:15:17

non mi funziona e non capisco perchè. io uso front page. quando cerco di visualizzarlo in "normale" vedo solo un quadrato.... il mio sito è www.tecnicaluce.it e la pagina è DOVE SIAMO. chi mi può aiutare?? dove sbaglio?? grazie 1000
risposta da fleo: hai dimenticato di riportare nel tag body il richiamo delle funzioni in corrispondenza di onload e onunload, come spiegato nell'articolo.

Italia_unita - 19/03/2007 11:07:41

In questi comenti noto una leggera vena comunista e da buon membro del partito Fascista io vi mando a cagare e a lavorare per poter mentenermi grazie ai vostri contributi

MATTEO PASSAFARO - 13/03/2007 09:44:25

SEI UN GRANDE IERI SERA, ANZI STANOTTE SAI QUANTO HO CERCATO QUESTO SCRIPT SUL SITO DI GOOGLE, E NON L'HO TROVATO. GRAZIE MATTEO

ACHorses - 23/02/2007 14:57:07

PERFETTO
Sono riuscito ed è stato davvero facile.

Grazie

LuxCoast - 09/02/2007 15:17:04

Eccezionale.
Grazie mille & Complimenti

ans - 26/01/2007 00:01:19

ma non funziona mica......

andrea - 11/12/2006 11:43:45

grazie, molto utile.

Vittorio - 31/10/2006 20:47:35

volete invece l'ibrida di default

dopo:
map.setCenter(new GLatLng(latitudine, longitudine), zoom);

Aggiungete:
map.setMapType(G_HYBRID_MAP) ;

marco - 30/10/2006 10:41:58

Grazie, sei grande!!!. Era da due giorni che provavo a fare una cosa del genere, ma non riuscivo a capire come, anche perchè sul sito di google è tutto in Inglese.

Simone Mazzucconi - 25/10/2006 11:53:23

Volete avere la vista dal satellite come default? Dopo qualche ricerca ho trovato che basta aggiungere l'istruzione map.setMapType(G_SATELLITE_TYPE );
Funziona...

lisalaf70 - 13/10/2006 21:06:32

Ho utilizzato subito l'idea!

http://digilander.libero.it/liceofermicanosa.it/dove_siamo.html

Grazie Fleo

SABINO ADDATI - 27/09/2006 18:24:42

Come al solito lo spunto è molto interessante! Salutoni!!

ida taci - 26/09/2006 22:57:30

capita proprio a fagiolo visto che stò cercando di riprogettare il sito dell'ufficio scolastico provinciale già CSA già provveditorato agli studi ecc. Caro Francesco sembra che tu legga nel pensiero, sarai mica un mago?

Marco Lombardi - 25/09/2006 20:25:54

Ottimo! Era proprio quello che ci voleva. Grazie Fleo. Un suggerimento per un prossimo articolo: l'iconcina favicon nei preferiti. Io ho letto questo articolo (http://www.gdesign.it/pages/howto/articoli/favicon/favicon.php), ci ho provato ma non ci sono riuscito.
Grazie sempre e comunque
Ciao
Marco Lombardi