Download - Programmare Google Maps con Javascript
google maps
Il nostro obiettivo:
Poter posizionare e visualizzare nostre informazioni su una mappa geo-referenziandole
Questa tecnica anche conosciuta come Mash-up
Per farlo utilizzeremo il servizio messo a disposizione da Google: google maps
E lo programmeremo utilizzando le sue API ed i linguaggi : XHTML Javascript PHP
mash-up
da wikipedia:
Mash-up (letteralmente: "poltiglia"), in termini informatici, indica un'applicazione che usa contenuto da pi sorgenti per creare un servizio completamente nuovo.
Il contenuto dei mash-up normalmente preso da terzi via API, tramite feed (es. RSS e Atom) o Javascript. I mash-up stanno rivoluzionando lo sviluppo del web permettendo a chiunque di combinare dati da siti come Amazon.com, eBay, Google, Windows Live e Yahoo! in modi innovativi.
per approfondire:
http://www.ictv.it/file/vedi/168/mashup/
http://www.slideshare.net/valicac/mashups-87355
esempio:
http://www.housingmaps.com/
google maps
da wikipedia (http://it.wikipedia.org/wiki/Google_Maps):
Google Maps un servizio accessibile dal relativo sito web e che consente la ricerca e la visualizzazione di mappe geografiche della Terra. Oltre a questo possibile ricercare servizi in particolari luoghi, tra cui ristoranti, monumenti, negozi, trovare un possibile percorso stradale tra due punti e visualizzare foto satellitari di molte zone con diversi gradi di dettaglio. Le foto sono statiche (non in tempo reale). Oltre a queste funzioni, offre anche una ricerca di attivit commerciali sulle stesse mappe
per approfondire:
http://www.youtube.com/watch?v=Yu9fV_YyIRI
url:
http://maps.google.it/
API
API (Application Programming Interface):
Definizione di metodi, oggetti e propriet per accedere ai
dati
wikipedia:
http://it.wikipedia.org/wiki/Application_programming_interface
In particolare nel nostro caso utilizzeremo le google maps API.
Che sono costituite da un framework javascript
google maps API:
http://code.google.com/intl/it-IT/apis/maps/documentation/index.html
mappe automatiche con il google wizard
Google offre un sistema automatico (wizard) che permette di generare la porzione di codice da aggiungere alle proprie pagine web per aggiungere una semlice mappa al prioprio sito.
Le mappe generate dal wizard possono contenere un solo indicatore, non possibile personalizzarle.
url del wizard:
http://www.google.com/uds/solutions/wizards/mapsearch.html
esempio:
http://econym.org.uk/gmap/example_wizard.htm
ancora pi semplice l'embed delle mappe
..ma basta fare copia e incolla...
utilizzare le API
per poter avere il controllo completo della mappa dobbiamo utilizzare le API messe a disposizione da google e programmare via javascript il nostro mash-up
L'utilizzo delle API gratuito a patto che si rispettino i
seguenti punti:
- devono essere utilizzate solo in pagine pubbliche e ad accesso
gratuito - necessario registrare un API KEY valida per un solo
dominio - non ci sono limiti al numero pagine visualizzate per
giorno (ma se supera le 500.000 bene informare google) - il numero
delle richieste di geocode per giorno limitato - non consentito
oscurare il logo do google
url per generare l'API KEY:
http://code.google.com/intl/it-IT/apis/maps/signup.html
esempio di API KEY:
ABQIAAAAglQh2814cniz0fajFXDDlhTbP7gUAaSGLwuL0wgux7a6hFzScxQr0rn6I2U7q0joG3bQXRqHI_uopQ
creare una mappa
Ottenuta l'API KEY possiamo realizzare la nostra prima pagina con una mappa di google:
per prima cosa va creata la pagina XHTML:
Google Maps JavaScript API Example
creare una mappa
dobbiamo poi includere il framework javascript:
Google Maps JavaScript API Example
creare una mappa
creiamo ora una funzione javascript che verr eseguita all'onload
del body, cio appena tutta la pagina stata caricata nel browser. La
funzione utilizzer le API di google per caricare la mappa
all'interno del DIV che abbiamo chiamato map
// function load() { if (GBrowserIsCompatible()) { var map = new GMap2(document.getElementById("map")); map.setCenter(new GLatLng(37.4419, -122.1419), 13); } } //]]>
creare una mappa
aggiungiamo i controlli per lo zoom e la
visualizzazione
// function load() { if (GBrowserIsCompatible()) { var map = new GMap2(document.getElementById("map")); map.addControl(new GLargeMapControl());map.addControl(new GMapTypeControl()); map.setCenter(new GLatLng(43.907787,-79.359741),8); } } //]]>
aggiungere marker ad una mappa
per aggiungere dei segnaposto (marker) ad una mappa utile
crearsi una funzione, che ci permetter di creare l'oggetto
segnaposto in un determinato punto e con un particolare codice html
da mostrare all'interno del fumetto
// function createMarker(point,html) { var marker = new GMarker(point); GEvent.addListener(marker, "click", function() { marker.openInfoWindowHtml(html); }); return marker; } //]]>
aggiungere marker ad una mappa
a questo punto possiamo utilizzare la funzione createMarker per
creare i nostri segna posto all'interno della funzione di
inizializzazione load
function load() { if (GBrowserIsCompatible()) { var map = new GMap2(document.getElementById("map"));map.addControl(new GLargeMapControl());map.addControl(new GMapTypeControl()); map.setCenter(new GLatLng(43.907787,-79.359741),8);var point = new GLatLng(43.65654,-79.90138);var marker = createMarker(point,'testo del fumetto e un Link') map.addOverlay(marker);
} }
aggiungere marker ad una mappa
possibile attivare il fumetto di un marker anche da un link
esterno alla mappa. Per farlo necessario dichiarare un array
globalevar gmarkers = [];da riempire poi ogni volta che si crea un
markerfunction createMarker(point,html) {
var marker = new Gmarker(point);
GEvent.addListener(marker, "click", function() {
marker.openInfoWindowHtml(html);
});
gmarkers.push(marker);
return marker;
}dichiariamo poi una nuova funzione:function myclick(i) {
GEvent.trigger(gmarkers[i], "click");}che richiameremo tramite link
dall'htmlprimo - secondo
caricare da un file XML
se vogliamo gestire molti marker la cosa migliore caricarli
utilizzando un file esterno XML.
per prima cosa dobbiamo crere il file example.xml:
Ora modifichiamo il codice javascript per leggere le info dei marker dal file XML
caricare da un file XML
all'interno della funzione load aggiungiamo:function load()
{
if (GBrowserIsCompatible()) {
var map = new
GMap2(document.getElementById("map"));map.addControl(new
GLargeMapControl());map.addControl(new GMapTypeControl());
map.setCenter(new
GLatLng(43.907787,-79.359741),8);GDownloadUrl("example.xml",
function(doc) {var xmlDoc = GXml.parse(doc);Var
markers=xmlDoc.documentElement.getElementsByTagName("marker"); for
(var i = 0; i < markers.length; i++) {var lat =
parseFloat(markers[i].getAttribute("lat"));var lng =
parseFloat(markers[i].getAttribute("lng"));var point = new
GLatLng(lat,lng);var html = markers[i].getAttribute("html");var
label = markers[i].getAttribute("label");var marker =
createMarker(point,label,html);map.addOverlay(marker);}});}}
pilotare la mappa dall'HTML
per farlo occorre che l'oggetto map sia dichiarato esternamente alla funzione load in modo che risulti globale
var map
function load() {
if (GBrowserIsCompatible()) {
map = new GMap2(document.getElementById("map"));}ora possiamo
accedere ai metodi dell'oggetto map anche da altre funzioni:
function myzoom(a) {map.setZoom(map.getZoom() + a);}
e richiamare la funzione dall'htmlZoom +5
Zoom -5
disegnare linee e poligoni
oltre i segna posti e possibile disegnare linee per indicare percorsi. per farlo inannzitutto modifichiamo il file XML aggiungendo le informazioni delle linee da disegnare
disegnare linee e poligoni
ed aggiungiamo il codice per estrarre le informazioni relative alle linee all'interno della funzione di callback richiamata da GDownloadUrlGDownloadUrl("example1.xml", function(doc) { var xmlDoc = GXml.parse(doc); var markers = xmlDoc.documentElement.getElementsByTagName("marker"); for (var i = 0; i < markers.length; i++) { ... }var lines = xmlDoc.documentElement.getElementsByTagName("line"); for (var a = 0; a < lines.length; a++) { var colour = lines[a].getAttribute("colour"); var width = parseFloat(lines[a].getAttribute("width")); var points = lines[a].getElementsByTagName("point"); var pts = []; for (var i = 0; i < points.length; i++) { pts[i] = new GLatLng(parseFloat(points[i].getAttribute("lat")), parseFloat(points[i].getAttribute("lng"))); } map.addOverlay(new GPolyline(pts,colour,width)); } });
adattare lo zoom in base ai marker
se i marker da visualizzare sono molti e magari generati in modo
dinamico (vedremo poi come) possibile che i livello di zoom scelto
per la mappa non sia sempre corretto per mostrare subito nella
videata tutti marker
se, ad esempio, modifichiamo il nostro file XML inserendo altri 3
marker con coordinate piuttosto lontane dai tre iniziali vedremo
che si trovano al di fuori della parte visibile della mappa:
adattare lo zoom in base ai marker
modificando il codice javascript, possiamo fare in modo che il livello si zoom sia calcolato in modo da mostrare tutti marker:
//dichiariamo una nuova variabile globalevar
bounds;//all'interno della funzione load annulliamo il
setCentermap.setCenter(new GlatLng(0,0),0);
//e creiamo l'oggetto Boundsbounds = new
GlatLngBounds();//all'intenro del ciclo for che aggiunge i marker
inseriamobounds.extend(point);//sempre dentro il metodo di callback
ma fuori dal ciclo for
inseriamomap.setZoom(map.getBoundsZoomLevel(bounds));map.setCenter(bounds.getCenter());
visualizzazione a tab nel fumetto
possibile visualizzare una serie di TAB (linguette) all'interno del fumetto. Per farlo sostituiamo la funzione per la creazione del marker:
function createTabbedMarker(point,html1,html2,label1,label2) {
var marker = new GMarker(point); GEvent.addListener(marker,
"click", function() { marker.openInfoWindowTabsHtml(
[new GInfoWindowTab(label1,html1),
new GinfoWindowTab(label2,html2)]
); });gmarkers.push(marker);
}
Ed andiamo a modificare la chiamata alla funzione che crea il marker all'interno del ciclo for dopo la lettura del file XML
var marker = createTabbedMarker(point,"primo contenuto","secondo contenuto","primo tab","secondo tab");
personalizzare l'immagine del marker
Google mette a disposizione anche un oggetto javascript che offre la possibilit di personalizzare l'immagine utilizzata per la creazione del marker.
//per prima cosa va creato e configurato l'oggetto (dentor l'IF
della funzione load)var martini = new GIcon();martini.iconSize=new
GSize(32,32);martini.shadowSize=new
GSize(56,32);martini.iconAnchor=new
GPoint(16,32);martini.infoWindowAnchor=new
GPoint(16,0);martini.image =
"http://maps.google.com/mapfiles/kml/pal2/icon27.png";martini.shadow
= "http://maps.google.com/mapfiles/kml/pal2/icon27s.png";
//mmodifichiamo la funzione createMarker in modo da prevedere
l'iconafunction createMarker(point,html,icon) {
var marker = new GMarker(point,icon);GEvent.addListener(marker,
"click", function()
{marker.openInfoWindowHtml(html);});gmarkers.push(marker);return
marker;}
//ed al momento di aggiugere il marker specifichiamo l'iconavar marker = createMarker(point,html,martini);
caricare i marker da un file KML
Al posto di sviluppare codice in javascript utilizzando le
Google Maps API possibile personalizzare una mappa di google anche
preparando un file KML e inviando a google stesso che provvedere a
renderlo visibile sulla mappaIl KML (Keyhole Markup Language) un
linguaggio basato su XML creato per gestire dati geospaziali in tre
dimensioni nei programmi Google Earth, Google Maps e Google
Mobile.Un semplice file KML contiene sempre oltre all'intestazione
XML anche una intestazione psecifica KML ed un tag radice: ....
All'interno del tag Document possono esserci una serie di ognuno
descriver un elemento da mettere sopra la mappa
KML Example file
Simple markers
Marker 1
testo di esempio
-122.1,37.4,0
caricare i marker da un file KML
KML Example file
Simple markers
Marker 1
testo di esempio
-122.1,37.4,0
ANALIZZIAMO IL DOCUMENTOIl file deve essere un XML
sintatticamente valido, e i nomi dei tag sono case sensitiveIl
valore no del tag name verr mostrato nella barra del titolo e nella
side barIl valore del tag description verr mostrato nella sidebarIl
valore del name all'interno del Placemark verr mostrato nella the
sidebar e nel fumettoIl valore della description all'interno del
Placemark verr mostrato nel fumettoLe coordinates si riferiscono
rispettivamente alla longitudine e alla latitudine e all'altitudine
(google map non in grado di gestire l'altitudine).La mappa verr
automaticamente centrata e zoommata per mostrare tutti i
placemarks.Per inviarla a Google basta passarla come parametro in
questo modo:
http://maps.google.com/maps?q=http://hosting3.e-xtrategy.net/corsoitis/lorenzo/kml1.xml
caricare i marker da un file KML
Ovviamente le stesse funzionalit le possiamo ottenere in modo piuttosto semplice utilizzando le Google Map API
function load() {
if (GBrowserIsCompatible()) {
var map = new Gmap2(document.getElementById("map"));
map.addControl(new GlargeMapControl());
map.addControl(new GmapTypeControl());
map.setCenter(new GLatLng(53.763325,-2.579041), 9);
var kml = new
GGeoXml("http://hosting3.e-xtrategy.net/corsoitis/lorenzo/kml2.xml");
map.addOverlay(kml);
}
}
ATTENZIONE: il file XML deve essere navigabile da Google
limitare la possibilit di zoom/movimento
Per limitare la possibilit di Zoom dobbiamo sovrascrivere i metodi .getMinimumResolution() e .getMaximumResolution() del nostro oggetto map
Per prima cosa bisogna dire che questa operazione va fatta per
ogni tipo di mappa presente nella nostra pagina (satellitare,
ibrida, normale) infatti all'interno dell'oggetto principale map
sono presenti ulteriori oggetti uno per ogni tipo di mappa. Ed i
metodi da sovrascrivere si trovano all'interno di questi oggetti.
Per estrarre l'array con i vari tipi di mappa possiamo usare il
metodo getMapTypes
var mt = map.getMapTypes();
Ora non resta che scorrere l'array mt e per ogni elemento
sovrascrivere i metodi
for (var i=0; i