Questa è una piccola guida sul come aggiungere Google Maps sul proprio sito.
Per prima cosa bisogna procurarsi una Google Maps Api Key al seguente indirizzo ( è gratuita ) una volta avuta la chiave che è del tipo : ABQIAAAA12tmGd23hPRYI1gq1ljBlRRBRe_QbRupmUt1Y0DKA2z8g5eJ9hTnuDba1EfGhLUYjVzErLZTYFuKfw Bisogna incominciare a strutturare il Javascript con cui Google Maps si interfaccerà per far visualizzare la nostra mappa sulla nostra pagina html.
Creiamo una nuova pagina html con il nostro editor usuale, fra i tag <head></head> inseriamo il seguente codice:
<script src=”http://maps.google.com/maps?file=api&v=2&key=MIA GOOGLE MAPS API KEY” type=”text/javascript”></script>
Dove al posto delle parole “MIA GOOGLE MAPS API KEY” va inserita la vostra api key che google vi ha assegnato grazie al link precedente.
Adesso sempre nei tag <head></head> inseriamo il seguente codice:
<script type=”text/javascript”>
function showMap()
{
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”));
// Zoom senza bisogno di aspettare
map.enableContinuousZoom();
// Doppio click per lo zoom
map.enableDoubleClickZoom();
// Visualizza controlli – TIPO MAPPA
map.addControl(new GMapTypeControl());
// Aggiunge dei controlli per lo zoom e lo spostamento
map.addControl(new GLargeMapControl());
// Aggiunge controlli in basso a destra
map.addControl(new GOverviewMapControl());
// Centra la mappa su Roma, con uno zoom di 17
map.setCenter(new GLatLng(41.895465,12.482324), 17);
// Crea un nuovo marker nel punto specificato
// con una descrizione HTML associata
function createMarker(point, description) {
var marker = new GMarker(point);
GEvent.addListener(marker, “click”, function() {
marker.openInfoWindowHtml(description);
});
return marker;
}
map.addOverlay(createMarker(new GLatLng(41.895465,12.482324), “Roma RM“));
}
}
</script>
Adesso vediamo come modificare il seguente codice a nostro piacimento.
Allora per centrare la mappa nel punto che vogliamo noi, dobbiamo andare su Google Maps Cercare la strada che vogliamo che gli utenti visualizzeranno con la nostra mappa; una volta cercata clicchiamo sul pulsante in alto a destra “Collegamento a questa pagina” e copiamoci in un blocco note il codice che Google ha tirato fuori. Adesso esaminiamo il codice che per esempio è questo:
http://maps.google.it/maps?f=q&hl=it&geocode=&q=piazza+venezia&sll=41.895465,12.482324&sspn=0.673646,1.2854&ie=UTF8&z=16&iwloc=addr&om=1
vedete che ad un certo punto ci sono delle vere e proprie coordinate, beh quelle sono le coordinate date da google per centrare la mappa del mondo sul quel punto preciso che abbiamo precedentemente cercato; le coordinate in questo caso sono: 41.895465,12.482324 e bisogna prendere tutti i numeri dopo l’uguale e prima del &sspn.
Adesso sostituiamo le nostre coordinate sul secondo script che avete inserito tra i tag <head></head>; dobbiamo solo sostituirle nei campi :
// Centra la mappa su Roma, con uno zoom di 5
map.setCenter(new GLatLng(41.919789,12.522485), 17);&
map.addOverlay(createMarker(new GLatLng(41.919789,12.522485), “Roma RM”));
Adesso abbiamo centrato la mappa sul nostro punto scelto, non ci rimane che scrivere modificare la descrizione che deve apparire quando cliccheremo sopra al segnalino per far vedere la strada scelta. Per modificare le scritte, dobbiamo editare il codice:
map.addOverlay(createMarker(new GLatLng(41.919789,12.522485), “Roma RM”));
Al posto di Roma RM, possiamo scrivere qualunque cosa e anche in codice HTML!
Abbiamo finito la configurazione dello script js per visualizzare la mappa, adesso dobbiamo solo aggiungere alcuni codici per visualizzare la vera e propria mappa sulla nostra pagina HTML.
Al posto del tag <body> dobbiamo scrivere:
<body onload=“showMap();” onunload=“GUnload()”>
Questi codici servono per inizializzare la resa grafica della mappa; adesso dobbiamo inserire l’ultimo codice:
<div id=“map”>Non hai abilitato i Javascript, necessari per la visualizzazione della mappa.</div>
Questo codice va inserito dove vogliamo far visualizzare la nostra mappa, come vedrete è un semplice “div” dove all’interno verràvisualizzata la nostra mappa.
Se vogliamo possiamo anche aggiungere degli abbellimenti al “div” dove verrà visualizzata la mappa, questo grazie al css. un codice esempio è questo:
<style type=”text/css” media=”screen”>
html,body {
margin:0;
padding: 0
}
#map {
width: 500px;
height: 400px
}
</style>
Questo codice dice al browser di dare un margine di 0 pixel in tutta la pagina, e poi il “div” chiamato map dovrà essere alto 400 pixel e largo 500. Questi parametri si possono modificare a vostro piacimento; basta saper lavorare con i CSS. Naturalmente questo codice andrà inserito dentro ai tag <head></head>.
Ecco qui un DEMO che racchiude tutta questa guida: Google Maps sul tuo sito
Se avete qualche problema, non esitate a postare un commento! 
Articoli Simili
Accorcia gli URL grazie a CutsLinkNuovo dominio per StreetWear (Map)Locazione Geografica di indirizzi IP
PDF Version
Mobile Version
Lo-Fi Version
1 settembre 2007 alle 3:58 pm
AGGIORNAMENTO:
Se volete controllare lo Zoom dallo Scroll del mouse basta inserire
// Zoom con il mouse
map.enableScrollWheelZoom();
Sotto a
// Doppio click per lo zoom
map.enableDoubleClickZoom();
Questa è un’altra semplice istruzione per modificare al meglio lo script di Google Maps sul nostro sito!
26 settembre 2008 alle 7:15 pm
Esiste anche per myspace
27 settembre 2008 alle 3:00 pm
Sara
Non so se MySpace ti possa far modificare il codice HTML delle pagine.
Altrimenti potresti trovare alcuni servizi come ad esempio:
24 ottobre 2008 alle 7:12 pm
[...] http://www.sygy.it/2007/07/22/google-maps-sul-tuo-sito/ Condividi : [...]
28 gennaio 2009 alle 11:52 am
great! grz
i prezzi pazzi di http://www.dimeglio.gigacenter.it