Se vogliamo inserire una mappa dinamica di google nel nostro sito, dobbiamo come prima cosa disporre di un account google. Se lo abbiamo bene, altrimenti ci registriamo su http://www.google.com/apis/maps/signup.html . Fatto ciò inseriamo l'url del sito in cui dobbiamo mettere la mappa
Fatto cio' avremo il nostro bel codice che saraà qualcosa del tipo:
ABQIBBBBwVU8SsGlrIn1WCJ_qdERRhQZHdYfT
fStJFFXpa9CO048zFWHwxRrBhlLLhalDG1bANXoBBARwnp07A
Creiamo la pagina che mostrerà la mappa.
1. Inseriamo il codice javascript necessario
<script src="http://maps.google.com/maps?file=api&v=2&key=ABQIAAAAwVU8SsGlrIn1WCJ_qdERRhQZHdYfTfStJFFXpa9CO048zFWHwxRrBhlLLhalDG1bANXoBBARwnp07A"
type="text/javascript"></script>
2. Inseriamo la parte di codice che mostrerà la mappa
<div id="map" style="width: 400px; height: 450px"></div>
3. Messaggio se non supporta javascript
<noscript>abilita javascript</noscript>
4. funzione che inserisce i marker
<script type="text/javascript">
//<![CDATA[
if (GBrowserIsCompatible()) {
function createMarker(point,html) {
var marker = new GMarker(point);
GEvent.addListener(marker, "click", function() {
marker.openInfoWindowHtml(html);
});
return marker;
}
5. Crea la mappa centrandola in latitudine e longitudine 37.836636,15.271892 e zoomandola di 19
var map = new GMap2(document.getElementById("map"));
map.addControl(new GLargeMapControl());
map.addControl(new GMapTypeControl());
map.setCenter(new GLatLng(37.836636,15.271892),19);
6. Inserisce i marker
var point = new GLatLng(37.836636,15.271892);
var marker = createMarker(point,'<div style="width:240px">Arthos si trova proprio qui!</div>')
map.addOverlay(marker);
7. Non supporta il codice
}
else {
alert("Sorry, the Google Maps API is not compatible with this browser");
}
//]]>
</script>
Esempio completo
<script src="http://maps.google.com/maps?file=api&v=2&key=ABQIAAAAwVU8SsGlrIn1WCJ_qdERRhQZHdYfTfStJFFXpa9CO048zFWHwxRrBhlLLhalDG1bANXoBBARwnp07A"
type="text/javascript"></script>
<div id="map" style="width: 400px; height: 450px"></div>
<noscript>no</noscript>
<script type="text/javascript">
//<![CDATA[
if (GBrowserIsCompatible()) {
function createMarker(point,html) {
var marker = new GMarker(point);
GEvent.addListener(marker, "click", function() {
marker.openInfoWindowHtml(html);
});
return marker;
}
var map = new GMap2(document.getElementById("map"));
map.addControl(new GLargeMapControl());
map.addControl(new GMapTypeControl());
map.setCenter(new GLatLng(37.836636,15.271892),19);
var point = new GLatLng(37.836636,15.271892);
var marker = createMarker(point,'<div style="width:240px">Arthos si trova proprio qui!</div>')
map.addOverlay(marker);
}
else {
alert("Sorry, the Google Maps API is not compatible with this browser");
}
//]]>
</script>
