Google Maps: come creare una mappa con le API e GeoRSS

Una guida per usare lo standard GeoRSS con Google Maps, dopo l’esperienza di GdRPlayers.it

Google Maps è uno strumento fantastico, che mette a disposizione delle API per fare praticamente qualsiasi cosa. Il problema è gestire delle mappe complesse, mostrando sullo schermo centinaia di marcatori contemporaneamente: in questi casi è fondamentale scegliere la strada giusta.

La soluzione che ho utilizzato nel mio progetto GdR Players si chiama GeoRSS: è un formato standard supportato anche da Google Maps, che consente con poche righe di codice di creare delle mappe complete.

Il formato GeoRSS

Per funzionare, la prima cosa necessaria è un file xml che segua questo standard. La struttura del documento deve essere simile a questa:

<?xml version="1.0" encoding="utf-8"?>
<feed xmlns="http://www.w3.org/2005/Atom" xmlns:georss="http://www.georss.org/georss" xmlns:gml="http://www.opengis.net/gml">
<title>Titolo feed</title>
<entry>
<title>Primo elemento</title>
<link href="http://..."/>
<summary>descrizione</summary>
<georss:where>
<gml:Point>
<gml:pos>41.8 12.6</gml:pos>
</gml:Point>
</georss:where>
</entry>
<entry>
<title>Secondo elemento</title>
<link href="http://..."/>
<summary>descrizione</summary>
<georss:where>
<gml:Point>
<gml:pos>43.8 11.3</gml:pos>
</gml:Point>
</georss:where>
</entry>
</feed>

Le entry ovviamente possono essere molteplici, gli elementi come link e summary sono facoltativi ed appariranno solamente se inseriti. Per alleggerire il codice, potreste decidere anche di utilizzare il formato GeoRSS-Simple, dove il codice

<georss:where>
<gml:Point>
<gml:pos>41.8 12.6</gml:pos>
</gml:Point>
</georss:where>

diventerà

<georss:point>41.8 12.6</georss:point>

Non mi soffermerò sul metodo di creazione di questo file: su GdR Players viene generato dinamicamente, ma se avete una mappa con dei contenuti predefiniti niente vieta di scrivere l’xml manualmente.

Creazione della mappa

Se avete già familiarità con Google Maps, sono sufficienti un paio di righe di codice per includere tutti i marker presenti nell’xml:

var geoXml = new GGeoXml("http://www.url.com/feed.xml");
map.addOverlay(geoXml);

L’indirizzo specificato dovrà corrispondere alla posizione del file xml.

Il codice JavaScript completo, che utilizzo sul mio progetto con poche opzioni in più, è il seguente:

function load() {
if (GBrowserIsCompatible()) {
var geoXml = new GGeoXml("http://www.url.com/feed.xml");
var map = new GMap2(document.getElementById("map_canvas"));
if (geoXml.loadedCorrectly()) {
geoXml.gotoDefaultViewport(map);
}
map.addControl(new GSmallMapControl());
map.addControl(new GMapTypeControl());
map.addOverlay(geoXml);
}
}

Le funzioni gotoDefaultViewport e addControl specificate servono rispettivamente per:

  • centrare la mappa e definire il livello di zoom automaticamente, in base ai marker presenti
  • aggiungere i controlli per spostarsi e zoomare

L’ultima riga è quella fondamentale, che aggiunge alla mappa i marcatori.

Per quanto riguarda il codice html, è sufficiente avere nella pagina:

<div id="map_canvas"></div>

che farà da contenitore. Dovrete poi richiamare la funzione load al caricamento, inserendo:

<body onload="load();" onunload="GUnload()">

Ricordatevi infine che per utilizzare le API di Google Maps dovrete registrarvi, ottenere una API Key gratuita ed inserire il codice che vi verrà indicato nel vostro template.

La cosa fantastica di questo metodo è che segue uno standard, ed ha già delle azioni predefinite che verranno aggiunte alla mappa. Cliccando sui marcatori verranno visualizzate le informazioni correlate, il titolo di ogni entry e la sua descrizione, così come eventuali immagini o link.

Perchè utilizzare GeoRSS?

Consiglio l’uso di questo formato e della classe GGeoXml quando avete numerosi marker da mostrare su una mappa. La maggior parte dei tutorial in rete infatti utilizzano un principio diverso, inviando per ogni indirizzo una richiesta di geocoding a Google per ottenere le coordinate in tempo reale. Questo va bene per pochi marcatori, ma se ne avete più di una decina inizierete ad avere dei problemi: oltre questo numero anche io ho dovuto cambiare strada, rendendomi conto che la cosa non funzionava.

L’unica soluzione è ricavare a priori le coordinate (seguendo questa guida), inserirle in un file xml e visualizzarlo con la classe GGeoXml come vi ho mostrato. Seguendo questo metodo GdR Players attualmente mostra la posizione di 130 utenti, senza avere particolari problemi al caricamento della pagina.

Aggiornamento: dopo un anno di test posso affermare che questa tecnica funziona con più di 1000 segnalini contemporaneamente sulla mappa, la consiglio caldamente.

Vuoi far crescere il tuo progetto online?

Pubblicato da

Tommaso Baldovino

UX/UI Designer, professionista del web con più di 15 anni di esperienza su WordPress. Sono disponibile a seguire nuovi progetti dall'ideazione alla realizzazione finale. Scrivo ogni 2 settimane la mia newsletter.

12 commenti su “Google Maps: come creare una mappa con le API e GeoRSS”

  2. molto utile, qualche settiamna fa mi sono impazzito per lavorare con le google map ma penso che ora utilizzarò questo sistema.

  3. quindi quello che hai fatto con GDP è fare in modo che alla registrazione degli utenti venissero aggiunte le coordinate al file XML…giusto? :)

    Grandioso…potrebbe tornare molto utile ;)

  4. @Steo: praticamente sì, anche se in casi come il mio è comunque meglio avere anche una funzione che genera tutto l’xml in caso di necessità…

  6. @Stefano: grazie per la segnalazione, non ho ancora visto cosa sia stato portato nella versione V3, ma è un’ottima notizia.

  7. Interessante… Nel nostro gestionale abbiamo implementato una funzione simile che permette all’utente di selezionare un certo numero di clienti e automaticamente Kgo ne ricava un URL che lo porta direttamente su google maps segnalando il primo cliente con una A, il secondo con un b, il terzo con una C ecc…
    Questo da anche la possibilità di “variare manualmente il tragitto” con il drag & drop…. La funzione è stata molto apprezzata! FICO!!!!

  9. @Bonzo: la classe GGeoXml è fatta apposta per interpretare xml con una struttura che segue lo standard che ho descritto, in poche righe di codice viene realizzata la mappa. Il metodo che hai linkato invece è quello “manuale”, dove devi essere tu a specificare quali parametri prendere dall’xml (che può essere costruito in qualsiasi modo) e come gestirli. Il secondo metodo è sicuramente più versatile, ma spesso potrebbe essere lavoro inutile.

  10. Quindi se voglio aggiungere parametri e personalizzare l’xml è forse meglio il secondo metodo, ma è sicuramente più laborioso.

    Grazie

  11. Non capisco in cosa sbaglio ma a me non viene visualizzato niente nella pagina.

  12. Ho letto il tutorial però una volta realizzato mi da una pagina completamente bianca.
    Quali possono essere gli errori ?
    La dicitura della api key o il non riconoscimento del file xml ?
    Grazie in anticipo.