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)
ciao sono matteo della mykugi
noi lo facciamo già da più di un anno
e con le mappature delle strade siamo arrivati prima noi di google,visto che abbiamo mappato le città italiane per seat
ora guarda questo
http://www.mykugi.com/?lon=10.04899&lat=45.660668&azi=320.899&alt=-9.264
buona visione
Ciao,
ho provato ad inserire i vettori ma dopo l’ottavo non funzionano più! sai perchè?
Grazie
Salve a tutti,
ho provato lo script dell’esempio dove, però, i vettori sono creati con uno script php (si collega ad un db ricavandone i valori dei vattori), la risposta del browser sembra essere esattamente quello dell’esempio, ma non funziona. Qualcuno sa dirmi il perchè? Inserisco il codice prodotto dal browser:
Untitled Document
function initialize() {
var lat_centro =”44.114773″;
var long_centro = “9.8517″;
var lat = new Array();
var long = new Array();
var descr = new Array();
lat[0]=”14.1899379″;
long[0]=”40.9010265″;
descr[0]=”marco”;
lat[1]=”14.1899379″;
long[1]=”40.9010265″;
descr[1]=”";
lat[2]=”12.51048″;
long[2]=”41.8729302″;
descr[2]=”";
lat[3]=”7.6864916″;
long[3]=”45.0703999″;
descr[3]=”";
lat[4]=”14.7296873″;
long[4]=”40.8936877″;
descr[4]=”";
lat[5]=”14.2411624″;
long[5]=”40.8534672″;
descr[5]=”lucio”;
var opzioni = {
zoom: 8; center: new google.maps.LatLng(lat_centro, long_centro),
mapTypeId: google.maps.MapTypeId.HYBRID, scaleControl: false }
var map = new GMap2(document.getElementById(“mappa_log”), opzioni);
var i = 0;
for(i=0; i<lat[1].lengt; i++)
{ var marker = new google.maps.Marker({
position: new google.maps.LatLng(lat[i], long[i]),
map: map, title: descr[i]});
}
}
Content for id “mappa_log” Goes Here
Vi ringrazio
Ciao, se volessi inserire questo codice – e visualizzare una mappa con dei markers – in una pagina/post di wordpress dove posso piazzare questo codice? e sopratutto si puo fare?
grazie
Più che inserire il codice, immaginando anche il sito dove tu voglia mettere la mappa (trekkingconibambini.it), mi affiderei a uno dei molteplici plugin per wordpress, tipo questo: http://wordpress.org/extend/plugins/xml-google-maps/ . Il plugin prende un file di markers (kml di Google o gpx, cioè direttamente dai waypoint del tuo gps) e lo “passa” a WordPress per essere visualizzato.
infatti. ci sono arrivato poco dopo. grazie!!!
volevo semplicemente ringraziare per il tutorial
grazie a te per essere passato da queste parti
ciao
ti ringrazio per il tutorial e approfitto per porti chiederti come è possibile avere icone diverse sulle diverse posizioni?
potresti indicarmi qualche esempio?
grazie
Rispondo molto genericamente: l’oggetto marker ha il suo namespace google.maps.Marker con diverse proprietà , una di queste è “icon”. Facendo una piccola ricerca su Google troverai innumerevoli esempi su come manipolare questa proprietà. Uno è questo: http://gmaps-samples.googlecode.com/svn/trunk/articles-customicon/customicon_end.html
In questo esempio e caratteristiche che deve avere l’icona sono contenute nella variabile myIcon, che poi viene “passata” alla proprietà di cui ti dicevo (var markerOptions = { icon:myIcon };)
Qui l’icona è stata creata ad hoc.
Un esempio più generale di cambio icone in ambiente Google Maps API V3 lo puoi trovare qui: http://code.google.com/intl/it-IT/apis/maps/documentation/javascript/overlays.html#Icons
Ciao
Ciao Cirdan, come posso contattarti in privato?
vorrei segnalare un piccolo errore nello script, il ciclo for utilizza come riferimento lat[1].length, ovvero la lunghezza dell’elemento 1 del vettore lat, il controllo invece va fatto sulla lunghezza del vettore stesso, quindi lat.length
Sale a tutti. Per caso c’è un limite di rappresentazione dei Marker. Inserendo un array ho notato che al massimo visualizza 150 Marker. Vi risulta?
Grazie
Sul numero max di marker non ci dovrebbero essere limiti, l’unica cosa che mi viene in mente la trovi qui ma riguarda le mappe statiche:
https://developers.google.com/maps/faq?hl=it-IT#geoxmllimits
Ciao