Google maps API 3.0, un esempio pratico

Per chi non lo sapesse, i modi per richiamare google maps dalla propria applicazione web sono molteplici (fonte: http://code.google.com/intl/it/apis/maps/):

• Maps JavaScript API
• Static Maps API
• Maps API for Flash
• Web Services
• Google Earth API

Oggi cercheremo di rendere semplice (ed espandibile a piacimento) il richiamo di google maps usando javascript. L’intento è puramente pratico: codice e modo per utilizzarlo. Il codice l’ho scritto io ed è rilasciato con licenza creative commons (ossia, copiate pure gente…)

Ecco quello che faremo:

1. definizione di una classe javascript per identificare una “bandierina” (MARKER) sulla mappa di Google
2. definizione di una classe javascript per identificare una città (legata alla classe precedente in modo da avere n bandierine per ogni città)
3. richiamo di google maps usando le nostre classi per produrre n bandierine per ogni città

Iniziamo.
La classe che troviamo qui sotto, rappresenta una bandierina (marker) su una mappa di Google maps.

/* Questa classe rappresenta un MARKER di GOOGLE */
var BandierinaGoogle = function(x, y, indirizzo) { 
 this.posizioneX = x;
  this.posizioneY = y;
  this.indirizzo = indirizzo;

 this.getX = function() {
    return this.posizioneX;
 }
 this.getY = function() {
    return this.posizioneY;
 }
 this.getIndirizzo = function() {
    return this.indirizzo;
  }

};

La classe che invece troviamo qui sotto rappresenta una città, il punto in cui centrare la mappa di tale città (centroX e centroY) e tutte le bandierine da mostrare in tale città (elencoBandierine).

/* Questa classe rappresenta tutti i MARKER di una CITTA' */
var Citta = function(citta, centroX, centroY, elencoBandierine) {
  this.elencoBandierine = new Array();
  this.elencoBandierine = elencoBandierine;
 this.citta = citta;
 this.centroMappaX = centroX;
  this.centroMappaY = centroY;
  
  this.getCentroMappaX = function() {
   return this.centroMappaX;
 }
 this.getCentroMappaY = function() {
   return this.centroMappaY;
 }
 this.getCitta = function() {
    return this.citta;
  }
 this.getElencoBandierine = function() {
   return this.elencoBandierine;
 }
};

Bene.
Ora creiamo tutte le bandierine per ogni città

var tutteLeBandierineTutteLeCitta = new Array();

// MARKER DI TAVIANO
var elencoBandierine = new Array();
var bandierina = new BandierinaGoogle ('39.97995', '18.084759', 'Via Regiona Mrgherita, incrocio con Corso Vittorio Emanuele II');
elencoBandierine.push(bandierina);
bandierina = new BandierinaGoogle ('39.985612', '18.088893', 'Via Acaia, 1');
elencoBandierine.push(bandierina);
var fermateTaviano = new Citta ('Taviano', '39.982949', '18.085384', elencoBandierine);  
tutteLeBandierineTutteLeCitta.push(fermateTaviano);

// MARKER DI LECCE
elencoBandierine = new Array();
bandierina = new BandierinaGoogle ('40.346233', '18.165786', 'Stazione centrale');
elencoBandierine.push(bandierina);
bandierina = new BandierinaGoogle ('40.326033', '18.149854', 'Via Lequile, cavalcavia ospedale');
elencoBandierine.push(bandierina);
bandierina = new BandierinaGoogle ('40.347129', '18.161253', 'Via Lequile, incrocio con Piazzale Rudiae');
elencoBandierine.push(bandierina);
bandierina = new BandierinaGoogle ('40.345579', '18.171322', 'Viale Marche, 9 (nei pressi della Questura)');
elencoBandierine.push(bandierina);
bandierina = new BandierinaGoogle ('40.348081', '18.172824', 'Viale Otranto, 57 (Marcelline)');
elencoBandierine.push(bandierina);
bandierina = new BandierinaGoogle ('40.346904', '18.184154', 'Viale Rossini, 76');
elencoBandierine.push(bandierina);
bandierina = new BandierinaGoogle ('40.357909', '18.183489', 'Viale Japigia, 156 (Centrum)');
elencoBandierine.push(bandierina);
bandierina = new BandierinaGoogle ('40.362812', '18.175236', 'Viale Ugo Foscolo, 23');
elencoBandierine.push(bandierina);
var fermateLecce = new Citta ('Lecce', '40.346233', '18.165786', elencoBandierine);  
tutteLeBandierineTutteLeCitta.push(fermateLecce);

Bene. Abbiamo creato l’array tutteLeBandierineTutteLeCitta che contiene tutte le bandierine da mostrare in 2 citta: Taviano e Lecce.
Fino a questo momento però neanche l’ombra delle API di Google maps 😀
Rimediamo subito 🙂
Usiamo adesso il nostro array per disegnare le nostre mappe e le nostre bandierine.
Di seguito troviamo il codice che ci consentirà di collegare queste nostre classi a una mappa di Google.

var marker;
var map;
var latlng;
var latlngCentro;
var address;
var z;
function codeAddress(ele_name, citta) {
  element = ele_name;
 document.getElementById('testoTitoloMappa').innerHTML = 'Dettaglio delle bandierine nella città di '+citta;
 document.getElementById(element).style.display='block';
 document.getElementById(element).style.top = y-200 +'px';
 document.getElementById(element).style.left = x-100 +'px';

  for (i=0; i<tutteLeBandierineTutteLeCitta.length; i++) {
    var nme = tutteLeBandierineTutteLeCitta[i];
   if (nme.getCitta() == citta) {
      //alert (nme.getCitta() + ' ' + nme.getCentroMappaX() + ' ' + nme.getCentroMappaY());
     latlngCentro = new google.maps.LatLng(nme.getCentroMappaX(), nme.getCentroMappaY());
    }
 }
 if (citta=='Lecce') {
   z=13;
 } else {
    z=15;
 }
 var myOptions = {
   zoom: z,
    center: latlngCentro,
   mapTypeId: google.maps.MapTypeId.ROADMAP
  }
 map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);

  for (i=0; i<tutteLeBandierineTutteLeCitta.length; i++) {
    var nme = tutteLeBandierineTutteLeCitta[i];
   if (nme.getCitta() == citta) {
      var elencoBandiere = new Array();
     elencoBandiere = nme.getElencoBandierine();
     for (j=0; j<elencoBandiere.length; j++) {
       var bandiera = elencoBandiere[j];
       //alert (nme.getCitta() + ' ' + bandiera.getY() + ' ' + bandiera.getX() + ' ' + bandiera.getIndirizzo());
       latlng = new google.maps.LatLng(bandiera.getX(), bandiera.getY());
        marker = new google.maps.Marker({
         position: latlng, 
          map: map, 
          title:bandiera.getIndirizzo()
       });         
        //alert (nme.getCitta() + ' ' + bandiera.getY() + ' ' + bandiera.getX() + ' ' + bandiera.getIndirizzo());
     }
   }
 }
}

Ora non ci resta che richiamare la funzione “codeAddress” dalla nostra pagina web 🙂
Poniamo attenzione alla riga 31 del precedente codice: la funzione disegna la mappa all’interno di un div che ha id =”map_canvas”. Senza tale oggetto non verrà disegnato nulla… Importanti sono anche le righe da 9 a 12 perché si riferiscono a oggetti html (‘testoTitoloMappa’) e a coordinate (x e y) che dovremo calcolare nel caso in cui volessimo posizionare il div “map_canvas” una una parte specifica della nostra pagina. Naturalmente se il nostro div è sempre visibile e se non dobbiamo modificare nulla, possiamo eliminare quelle righe…
Fatto tutto questo dobbiamo anche inserire nella <head> della nostra pagina la seguente riga di codice, senza la quale tutto il nostro lavoro sarebbe completamente inutile

<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>

Sarebbe sicuramente un utile esercizio migliorare questo codice, consentendo ad esempio di inserire lo zoom con cui disegnare la mappa all’interno della classe Citta…