Nov 012011
 

Come inserire una Google Maps nel proprio sito web?

Innanzitutto partiamo dalle versioni a nostra disposizione, attualmente lavoriamo con la versione 3, la documentazione e alcuni tutorial sono disponibili a questo indirizzo:

http://code.google.com/intl/it-IT/apis/maps/documentation/javascript/

Una novità di questa versione è che non è più necessario registrarsi e acquisire una chiave per usare le Google Maps.

La prima operazione è inserire nell’intestazione della pagina il collegamento alla libreria javascript: <script type=”text/javascript” src=”http://maps.googleapis.com/maps/api/js?sensor=false”></script>. Il parametro sensor può avere valore true o false, si metterà il parametro a true se si vuole avere la possibilità di usare la localizzazione gps.

Il secondo passaggio sarà quello di inserire nella propria pagina il box che conterrà la Google Maps:


<div id=”miamappa”></div>

e formattarlo opportunamente con un css, almeno per assegnare le dimensioni. (es. css inline style=”width:400px; height:300px;”).

Per il terzo passaggio torniamo nell’intestazione e inseriamo lo script necessario per la visualizzazione della mappa e la sua centratura:


<script type=”text/javascript”>
 var map;

function inizializza() {
 var milano = new google.maps.LatLng(45.463681, 9.188171);
 var mapOptions = {
 zoom: 12,
 center: milano,
 mapTypeId: google.maps.MapTypeId.TERRAIN
 };
 map =  new google.maps.Map(document.getElementById(“miamappa”), mapOptions);
 }
 </script>

La prima riga della funzione inizializza stabilisce le coordinate del punto al centro della mappa. che verrà usata nella variabile mapOptions. Per quanto riguarda gli altri due parametri zoom stabilisce il livello di detaglio della mappa e mapTypeId la tipologia della stessa.

Infine lanciamo la funzione inizializza al caricamento della pagina: <body onload=inizializza();>

Vedi l’esempio completo (visualizza codice sorgente per copiare)

Sorry, the comment form is closed at this time.