L’arrivo del web 2.0 ha dato il via anche alla diffusione dei software via API che permettono di sfruttare funzioni appartenenti ad altri sul proprio sito, blog o social network.
Nell’ambito della geo-referenziazione Google distribuisce gratuitamente strumenti che ci permettono di utilizzare, modificare e gestire le mappe geografiche di tutto il mondo; ecco come fare per inserire le funzioni di google maps nel proprio sito:
il primo passo da compiere è registrarsi a Google per poter ottenere una API Key relativa al nome del proprio sito che utilizzerà le GoogleMaps.
Andiamo all’indirizzo: http://code.google.com/apis/maps/signup.html per richiedere la nostra ApiKei.
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=123456" type="text/javascript"></script>
Dove "123456" 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(41.871940, 41.871940), 13);
}
}
</script">
I numeri all’interno delle parentesi corrispondono alle coordinate longitudine e latitudine mentre il numero 13 corrisponde al livello dello zoom.
In seguito inseriamo il marker che indica il luogo che ci interessa mostrare subito dopo le coordinate e prima della chiusura delle parentesi graffe:
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(41.871940, 41.871940), "il mio luogo<br />Via V. Emanuele, 1<br />Roma")
);
All’interno del tag body inseriamo:
<body onload="load()" onunload="GUnload()">
Invece, dove vogliamo che si visualizzi la mappa bisogna inserire un div:
<div id="map"></div>
Se volete creare una mappa un po' più complessa con il cerca indirizzo, icona personalizzata e streetview scaricate l'allegato in pdf e seguite le istruzioni
Guardate l’esempio: www.romaferratella.cepu.it
Per qualsiasi informazione contattatemi pure tramite post su questo blog
Download Articolo_googlemaps2
