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; } //]]>


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);

} }


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() {
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


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


Ovviamente le stesse funzionalit le possiamo ottenere in modo piuttosto semplice utilizzando le Google Map API

function load() {
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

Education

Programmare Google Maps con Javascript