L''esigenza successiva diventa quella di visualizzare sulla nostra mappa dei punti particolari.
Secondo il codice 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. Altri tipi di overlay sono ad esempio le polylines (insiemi di punti che formano una linea) e i polygons (poligoni). L'elenco non si esaurisce qui ma in questo post ci concentreremo solo sui primi.
Nell'esempio che vi propongo, su una Google Map vengono visualizzati i markers relativi alle scuole che ho frequentato (elementari, medie, superiori). Al passaggio del mouse su ogni marker viene visualizzato il tipo di scuola.
Come nell'esempio precedente, prima di cominciare abbiamo bisogno delle coordinate dei punti che vorremmo visualizzare. Ci potremmo affidare di nuovo a MyGeoPosition.com oppure, giusto per segnalare altri siti di geocoding, una alternativa diversa come questa. L'importante, lo ricordo, è che le coordinate siano in formato decimale.
Le coordinate di una delle scuole mi serviranno anche per centrare la mappa, riutilizzo dunque il metodo
map.setCenter(new GLatLng(lat, long), livellozoom);
Per la visualizzazione del marker, invece, introduco il nuovo metodo
GMarker(coord, {title: "string"});
dove coord è il vettore bidimensionale delle coordinate, valorizzato attraverso la classe GLatLng. title è uno degli attributi opzionali di GMarker, e consente la visualizzazione di una stringa al passaggio del mouse sul marker.
A questo punto abbiamo tutti gli elementi per finire il nostro lavoro. Il risultato lo potete apprezzare qui e passiamo dunque a visualizzare il codice per intero:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<title>Visualizzazione markers su una Google Map </title>
<script src="http://maps.google.com/maps?file=api&v=2&
key=APIKEYCHEMIHADATOGOOGLE"
type="text/javascript"></script>
<script type="text/javascript">
function initialize() {
if (GBrowserIsCompatible()) {
//Visualizza mappa solo modalita' stradale
var map = new GMap2(document.getElementById("map_canvas"));
// ITIS G. Capellini
var center = new GLatLng(44.111508, 9.835831);
// Elementari Via Pascoli
var pin1 = new GLatLng(44.113902, 9.834570);
// Medie via Leopardi
var pin2 = new GLatLng(44.113715, 9.833441);
map.setCenter(center, 16);
// L'opzione title di Gmarker fa apparire una stringa al
passaggio sul marker
var marker = new GMarker(center, {title: "Qui ho frequentato le
superiori"});
map.addOverlay(marker);
var marker = new GMarker(pin1, {title: "Qui ho frequentato
le elementari"});
map.addOverlay(marker);
var marker = new GMarker(pin2, {title: "Qui ho frequentato
le medie"});
map.addOverlay(marker);
//Se voglio aggiungere altri markers basta dichiarare in alto
una nuova variabile (es. pin3) e copiare le due righe appena
sopra questo commento sostituendo il nome della variabile
//Aggiunge i controlli formato grande
map.addControl(new GLargeMapControl());
//Aggiunge la scala
map.addControl(new GScaleControl());
}
}
</script>
</head>
<body onload="initialize()" onunload="GUnload()">
<div id="map_canvas" style="width: 550px; height: 450px"></div>
</body>
</html>
Nell'esempio che vi ho proposto esempio la visualizzazione dei markers è un po' rozza. Se dovessimo infatti aggiungere nuovi markers dovremmo necessariamente modificare il codice di cui sopra, che diventerebbe tra l'altro poco leggibile se dovessimo porre su una mappa numerosi markers.
La visualizzazione statica dei markers è dunque un grosso limite, i cui rimedi saranno trattati nei post a venire.
Post
Salve,
RispondiEliminaho letto il tutorial e lo trovo molto interessante, sto sviluppando un sito web, con delle “piccole” varianti ossia:
verificare se il Percorso generato passa vicino ($distanza=1km) a dei punti memorizzati sul db.
Secondo te avendo a disposizione nel db una serie di punti (latidudine,longitudine), e avendo già implementato il calcolo del percorso con inserimento partenza e destinazione calcolati con geocodifica, come posso visualizzare sulla mappa tramite marker i punti vicini al percorso?.
Grazie mille in anticipo!!.