Come aggiungere Google Maps ad una pagina Web
Scritto da Gabriele Rocca il 21 Giu 2006 | Categoria: API How to
Sempre più sovente sui siti internet, vengono utilizzate delle mappe geografiche e topografiche per fornire o integrare alcuni servizi, come per esempio la ricerca di hotel, ristoranti o luoghi di divertimento di una città, sulle proprie pagine Web. Esistono molti modi per fare questo, ma spesso per ottenere dei buoni risultati, è necessario possedere delle ottime conoscenze dei linguaggi di programmazione delle pagine Web.
In questo post, mostreremo invece un modo semplicissimo, che richiede solo un minimo di conoscenze dell’HTML, per incorporare l’ormai famoso servizio Google Maps (versione 2) ad una pagina web.
Il primo passo da effettuare è quello di ottenere una Key all’indirizzo http://maps.google.com/apis/maps/signup.html .
Per poterlo fare è necessario:
- Indicare la cartella del vostro sito (es: http://etech.top-ix.org/ )
- Indicare un’account di posta Gmail (che potete ottenere gratuitamente sul sito di Google)
Ora con poche righe di codice potrete integrare Google Maps:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Aggiungere Google Maps ad una pagina web</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<!-- Sostituendo "INSERISCI_LA_KEY" con la vostra KEY, lo sript importerà nella pagina tutto il codice Javascript necessario per gestire le mappe //-->
<script src="http://maps.google.com/maps?file=api&v=2&key=INSERISCI_LA_KEY" type="text/javascript"></script>
<script type="text/javascript">
//<![CDATA[
// La funzione load() è quella che permette di caricare la mappa
function load()
{
// verifiva la compatibilità del Browser
if (GBrowserIsCompatible()) {
// Ottiene l'elemento della pagina chiamato "map" (il DIV)
// e crea la mappa utilizzandolo come contenitore.
var map = new GMap2(document.getElementById("map"));
// Aggiunge una barra di controllo (di tipo Large) per lo zoom e lo
// spostamento
map.addControl(new GLargeMapControl());
// Aggiunge una barra di controllo che permette tre tipi di
// visualizzazione: mappa, setellite e ibrida
map.addControl(new GMapTypeControl());
// Centra la mappa su Torino alle coordinate di latitudine 45.068150 e
// longitudine 7.688050, con uno zoom di 10 e visualizzazione ibrida
map.setCenter(new GLatLng(45.068150,7.688050), 10,G_HYBRID_MAP);
}
}
//]]>
</script>
</head>
<body onload="load();" onunload="GUnload()">
<div id="map" style="width: 600px; height: 450px; top: 20px; left: 300px;">Il tuo Browser non supporta Google Maps o non è attivato Javascript</div>
</body>
</html>
Nell’esempio mostrato, sono illustrate e descritte passo-passo tutte le principali funzioni utilizzate. In particolare ricordiamo che è necessario sostituire la propria KEY al posto di “INSERIRE_LA_KEY” e se si vuole cambiare la centratura della mappa è sufficiente indicare le coordinate geografiche (latitudine e longitudine), espresse in gradi (normalmente vengono rappresentate in °,’,’’ dove i ‘ e ‘’ devono essere portati in centesimi), reperibili facilmente su internet o con Google Earth .
Popularity: 35% [?]
[…] Una volta integrata Google Maps ad una pagina web come descritto nel post precedente “Come aggiungere Google Maps ad una pagina Web”, possiamo personalizzarla a nostro piacimento, aggiungendo tutti i servizi che ci interessano. Per esempio, se volessimo inserire dei marker alla nostra mappa, è sufficiente modificare la funzione load () vista precedenza aggiungendo alcune righe di comando: […]
[…] Una volta integrata Google Maps ad una pagina web come descritto nel post precedente “Come aggiungere Google Maps ad una pagina Web”, possiamo personalizzarla a nostro piacimento, aggiungendo tutti i servizi che ci interessano. Per esempio, se volessimo inserire dei marker alla nostra mappa, è sufficiente modificare la funzione load () vista precedenza aggiungendo alcune righe di comando: […]
[…] Come aggiungere Google Maps ad un sito Web Personalizzare la propria mappa Articoli collegati Personalizzare la propria mappaInserire icone personalizzate assegnandole ad un markerCaricare dei marker su Google Maps tramite XML […]
Vorrei sapere se è possibile inserire, in una mappa creata sul mio sito, un “fumetto” che indichi una precisa località come mostrato nella pagina di my maps di google di cui spero di riprodurre l’URL qui di seguito
https://www.google.com/accounts/ServiceLogin?service=local&hl=it&nui=1&continue=http://maps.google.it/maps/ms%3Fie%3DUTF8%26hl%3Dit%26msa%3D10
Grazie
Antonio
Ciao Antonio, se ho capito bene il “fumetto” a cui ti riferisci è un marker. Nel post “Personalizzare la propria Mappa” ho descritto come aggiungere un marker. Nello script che ho indicato ho modificato leggermente la funzione load() che ho scritto in questo articolo aggiungendo una funzione “createMarker()” che permette di creare un marker. La funzione può poi essere richiamata in questo modo: map.addOverlay(createMarker(new GLatLng(x,y), “descrizione”)); dove x e y sono la latitudine e la longitudine del marker, mentre nella descrizione può essere messo sia del testo sia dell’html (nella pagina che mi hai indicato ad esempio hanno messo un’immagine indicando
<img src="https://www.google.com/accounts/maps/my_maps_nyc.jpg">).Spero di averti dato la risposta che volevi.
Ciao.
Gabriele.