Dopo l’articolo nel quale abbiamo imparato a visualizzare una semplice Google Map V3, tentiamo di costruire qualcosa di più utile. L’esigenza potrebbe essere quella di visualizzare su di una mappa centrata una serie di punti particolari.
Con lo scopo di facilitare la comprensione dei termini utilizzati, ricordo che secondo le specifiche di Google Maps tutto ciò che può essere identificato da coordinate geografiche é definito overlay. Un particolare tipo di overlay è il marker, cioè il singolo punto sistemato su una mappa.
Nell’esempio che vi propongo, su una Google Map vengono visualizzati i markers relativi ai luoghi dove ho abitato io e alcuni elementi della mia famiglia. Al passaggio del mouse su ogni marker viene visualizzato il tipo di scuola.
Prima di cominciare abbiamo bisogno delle coordinate dei punti che desideriamo visualizzare. A tale scopo o annotiamo i dati forniti dal nostro gps oppure utilizziamo applicazioni di geocoding, in grado di estrarre le coordinate da un indirizzo. Possiamo far riferimento a servizi come http://mygeoposition.com/ .
Una volta ottenuti i dati, si tratta di “passarli” al nostro codice. La scelta che ho fatto è stata quella di caricare i dati in tre vettori (array), uno per le latitudini, uno per le longitudini e uno per le descrizioni dei markers.
In fase di visualizzazione, i dati dei vettori verranno letti attraverso un ciclo iterativo for.
var i = 0;
for (i=0; i<lat[1].length; i++)
{
var marker = new google.maps.Marker({
position: new google.maps.LatLng(lat[i], long[i]),
map: map, title: descr[i] });
}
Il risultato lo trovate qui mentre qui sotto potete esaminare un estratto del codice usato.
<html>
<head>
<meta name=”viewport” content=”initial-scale=1.0, user-scalable=no” />
<meta http-equiv=”content-type” content=”text/html; charset=UTF-8″/>
<script type=”text/javascript” src=”http://maps.google.com/maps/api/js?
sensor=false”></script>
<script type=”text/javascript”>
function carica_variabili() {
//definizione coordinate su cui centrare la mappa
var lat_centro = “44.114773”;
var long_centro = “9.8517”;
//inizializzazione vettori
var lat = new Array();
var long = new Array();
var descr = new Array();
//popolamento vettori. Per aggiungere punti è sufficiente inserire una nuova terna di
// valori: lat[4], long[4], descr[4] e cosi’ via
lat[0] = “44.111206”;
long[0] = “9.834749”;
descr[0] = “Qui ho abitato fino al 1990”;
lat[1] = “44.117701”;
long[1] = “9.871722”;
descr[1] = “Qui ho abitato fino al 2000”;
lat[2] = “44.113025”;
long[2] = “9.843195”;
descr[2] = “Qui abita mia zia Maria”;
lat[3] = “44.118320”;
long[3] = “9.846319”;
descr[3] = “Qui abita mia sorella”;
//Opzioni della mappa: zoom livello 14, centrata su un punto particolare,
//modalità IBRIDA
var Opzioni = {
zoom: 14, center: new google.maps.LatLng(lat_centro, long_centro),
mapTypeId: google.maps.MapTypeId.HYBRID,
scaleControl: false }
var map = new google.maps.Map(document.getElementById(“map_canvas”), Opzioni);
//ciclo FOR per la lettura dei valori dei vettori e relativa visualizzazione su
//mappa
var i = 0;
for (i=0; i<lat[1].length; i++)
{ var marker = new google.maps.Marker({
position: new google.maps.LatLng(lat[i], long[i]),
map: map, title: descr[i] });
}
}
</script>
</head>
<body style=”margin:5px; padding:2px;” onload=”carica_variabili()”>
<div id=”map_canvas” style=”width: 60%; height: 60%;”></div>
</body>
</html>
Linkografia
@ Maps API V3 Overlays (Google Code – inglese)
@ Esempio visualizzazione markers singolo (Google Code – inglese)
Il blog di Cirdan il Timoniere 