Script ajax: Caricare su Google maps coordinate da xml o feed rss con georss

   difficoltà:  script script script script script

Download
Script simili
4/7/2007


Abbiamo visto negli articoli:
Script ajax: Inserire una mappa di google maps nel proprio sito
Script ajax: Visualizzare sul proprio sito un indirizzo con Google maps
come inserire nel proprio sito una mappa di google maps inserendo segnaposti per i punti da segnalare tramite le coordinate o l'indirizzo da cercare.
Per le nozioni base facciamo riferimento ancora ai due articoli precedenti. Per cui ricordiamoci di prelevare se non l'abbiamo già una API Key da

http://www.google.com/apis/maps/signup.html

Con questo script impareremo a usare Georss, cioè a caricare l'elenco delle coordinate da visualizzare tramite segnaposto sulla mappa da un file xml, nel formato Georss.

Questo è utile perchè potremo creare il file xml in modo dinamico prelevando ad esempio l'elenco delle coordinate e le descrizioni da un database.

Vediamo velocemente lo script come viene modificato per ottenere questa funzionalità:

<script type="text/javascript">
currentdata=new Date();
var datatime=currentdata.getTime();
var map;
var geoXml = new GGeoXml("http://www.dominio.com/feed.xml?"+datatime);

function load() {
if (GBrowserIsCompatible()) {
map = new GMap2(document.getElementById("map"));
map.addControl(new GLargeMapControl());
map.setCenter(new GLatLng(41.854549,12.585651), 11);
map.addControl(new GLargeMapControl());
map.addOverlay(geoXml);
}
}
</script>

Per tutte le funzioni vi rimando agli script precedenti. Riassumo in breve:
map.setCenter(new GLatLng(41.854549,12.585651), 11);
setta le cordinate iniziali su cui centrare la mappa e lo zoom

Invece con:
map.addOverlay(geoXml);
Andremo a inserire tutti i segnaposti prelevando le coordinate dal file xml all'indirizzo settato. L'indirizzo deve essere un url assoluto quindi del tipo:
http://www.dominio.com/feed.xml
abbiamo aggiunto la variabile datatime che prende il valore timestamp della data odierna ogni volta. Questo solo per impedire che il file feed venga prelevato dalla cache, e quindi quando modificato non venga visualizzata l'ultima versione.

Il file feed.xml deve essere conforme allo standard Georss, per cui dovrà avere una struttura del genere:
<?xml version="1.0" encoding="iso-8859-1"?>
<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>
<subtitle>Sottotitolo feed</subtitle>

<entry>
<title><![CDATA[Titolo oggetto]]></title>
<link href="http://www.link.it"/>
<summary><![CDATA[Descrizione oggetto]]></summary>
<georss:where>
<gml:Point>
<gml:pos>41.8 12.6</gml:pos>
</gml:Point>
</georss:where>
</entry>

</feed>

Il tag <entry> verrà ripetuto per ogni segnaposto da visualizzare. I dati da inserire saranno:
<title> -> Titolo dell'oggetto
<link> -> Link esterno se disponibile
<summary> -> Descrizione dell'oggetto
<gml:pos> -> Coordinate dell'oggetto.

Vediamo quindi un esempio completo.
Ecco il file mappa.htm:
<!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=iso-8859-1"/>
<title></title>
<script src="http://maps.google.com/maps?file=api&amp;v=2&amp;key=INSERIRE_QUI_LA_API_KEY"
type="text/javascript"></script>
<script type="text/javascript">

//<![CDATA[

currentdata=new Date();
var datatime=currentdata.getTime();
var map;
var geoXml = new GGeoXml("http://www.dominio.com/feed.xml?"+datatime);

function load() {
if (GBrowserIsCompatible()) {
map = new GMap2(document.getElementById("map"));
map.addControl(new GLargeMapControl());
map.setCenter(new GLatLng(41.854549,12.585651), 11);
map.addControl(new GLargeMapControl());
map.addOverlay(geoXml);
}
}
//]]>
</script>
</head>
<body onload="load()" onunload="GUnload()">
<div id="map" style="width: 500px; height: 300px"></div>
</body>
</html>
Ed ecco il file feed.xml:
<?xml version="1.0" encoding="iso-8859-1"?>
<feed xmlns="http://www.w3.org/2005/Atom"
xmlns:georss="http://www.georss.org/georss"
xmlns:gml="http://www.opengis.net/gml">
<title>Feed GeoRSS</title>
<subtitle>Elenco postazioni</subtitle>

<entry>
<title><![CDATA[Colosseo]]></title>
<link href="http://it.wikipedia.org/wiki/Colosseo"/>
<summary><![CDATA[Il Colosseo, originariamente conosciuto come Anfiteatro Flavio o semplicemente come Amphitheatrum]]></summary>
<georss:where>
<gml:Point>
<gml:pos>41.824549 12.635651</gml:pos>
</gml:Point>
</georss:where>
</entry>

<entry>
<title><![CDATA[Parco Traiano]]></title>
<summary><![CDATA[Splendido parco,è a Roma: <a href="http://it.wikipedia.org/wiki/Traiano"/>Wikipedia</a>]]></summary>
<georss:where>
<gml:Point>
<gml:pos>41.888301 12.496669</gml:pos>
</gml:Point>
</georss:where>
</entry>

</feed>
Il risultato sarà la visualizzazione delle coordinate prelevate dal feed, in questo caso il colosseo a Roma e il parco Traiano:

google maps xml georss





Commenti


  rachele

11/4/2008 17:40:10

vorrei utilizzare questo script per inserire in una mappa una serie di marker.
C'è la possibilità di stampare dal file xml un menù con una voce per ogni marker, in modo che cliccando sul menù si apra la infowindow del marker corrispondente?

  Vincenzo

3/5/2008 13:36:52

Se io avessi un database sul quale confluiscono i dati di alcuni rivelatori di traffico situati nella città potrei prelevarli dal database e in base hai loro valori visualizzare delle linee colorate sulle strade?

  max

7/7/2008 12:37:12

è possibile inserire un marker pesonalizzato?

  Fabio

7/7/2008 12:44:36

Dai un occhio qui:
Google maps icone

  Stefano

4/3/2009 12:33:45

Ciao a tutti! ho una piccola domanda che non riesco ad ovviare per quanto riguarda l'uso dei feed rss con georss.
Finchè visualizzo tanti risultati, per esempio nel vostro tutorial (Ottimo) caricate il Colosseo e il Parco Traiano, tutto ok.
Questa è la mia domanda: se volessi visualizzare solo un risultato, per esempio il Colosseo, no problem, ma vorrei che il Maker del Colosseo fosse già aperto quando carico la pagina, come fare??
Vi incoraggio ad aiutarmi perchè ci stò impazzendo... :)
Grazie a tutti

  Carlo

17/5/2009 17:41:37

Ho fatto un copia e incolla non ho modificato assolutamente nulla ma i punti sulla mappa non escono dove ho sbagliato ?

  Luca

20/5/2009 11:13:14

Ciao, grazie dello script, veramente utile...come faccio se ho 10 punti sulla mappa e voglio contraddistinguerli con marker diversi (per esempio numerati da 1 a 10)?
grazie

  Fabio

20/5/2009 11:23:00

@Luca:
guarda mi ci son sbattuto di recente ma nn son riuscito a trovare la soluzione. L'unico modo trovato è non usare il file esterno ma fare un ciclo sulle coordinate(io le ho in un database mysql) e per ogni punto usare l'icona .
Per settare l'icona: marker icone personalizzate

  Luca

20/5/2009 11:34:54

Ok....grazie...anke io avevo trovato solo quella soluzione... ;-)
per quanto riguarda la prima domanda, quella di rachele mi puoi dire qualcosa?!
grazie

  carlo

1/6/2009 1:27:02


var map;
function initialize(coordinate,name)
{
if (GBrowserIsCompatible())
{

// Crea l'icona personalizzata
icona = new GIcon();
icona.image = "img/mpoint.png";
icona.iconSize = new GSize(20, 34);
icona.iconAnchor = new GPoint(12, 34);
icona.infoWindowAnchor = new GPoint(21, 1);
// Fine
document.getElementById('window_title').innerHTML = 'Mappa - '+name;
document.getElementById('window_container').innerHTML = '<div class="map" id="map"></div>';

map = new GMap2(document.getElementById("map"));
map.setUIToDefault();
map.setCenter(new GLatLng(coordinate), 16);
//alert('map.setCenter(new GLatLng('+coordinate.value+'), 16);');
//map.addOverlay(new GMarker(new GLatLng(40.449571965592014, 14.977524876594543),icona));
}
}


ciao ragazzi ho provato a fare questa funzione... solo che quando la richiamo e come se non ricevesse le coordinate qualcuno mi da una mano per correggerla ?

  Anna

11/6/2009 1:31:16

Non ho capito bene come poter utilizzare il codice a questo link http://code.google.com/intl/it-IT/apis/maps/documentation/overlays.html#Icons_overview abbinandolo al map.addOverlay(geoXml);
Puoi aiutarmi?

  riccardo

27/11/2009 10:25:09

ciao. sto lavorando su questa pagina da un po. e vorrei sapere una cosa. come faccio avendo sulla pagina in una textarea l'xlm, a prenderlo e visualizzare sulla mappa? spero in una vostra risposta e vi rigrazio già. ciao

  Enrico

4/1/2010 0:23:13

è possibile caricare un file XLM o meglio IGC con delle coordinate Aeree ??
Vorrei caricare una file con un percorso fatto in parapendio.
Si può fare ??

  Keivan

1/5/2010 10:21:01

Questo script è perfetto e funzionante! Solo una domanda... come faccio ad impostare un segnaposto personalizzato sulla mappa?



Lascia un commento


Codice di controllo*:
Nome*:
Email/Link:
Testo*:
 
I campi contrassegnati con * sono obbligatori.