Script ajax: Mappe personalizzate kml su google maps con georss e Mapplets

   difficoltà:  script script script script script

Script simili
16/7/2007


Abbiamo visto in Script ajax: Caricare su Google maps coordinate da xml o feed rss con georss come inserire una mappa di google sul proprio sito e caricare segnaposto prelevando le coordinate dei punti da un file xml in formato georss.
Non sempre però è semplice e veloce reperire tutte le coordinate dei punti da inserire nel file xml.
Con le Mapplets di google maps potremo fare molto di più in modo molto semplice e veloce.
Quello che vogliamo fare in questo script è disegnare con 'le mie mappe' di google maps la nostra mappa personalizzandola in ogni elemento. Disegnando i percorsi inserendo semplici righe, inserendo segnaposti con semplici click direttamente sulla mappa, e addirittura visualizzare immagini nelle descrizioni o disegnare forme geometriche o altro.
Una volta disegnata per bene la nostra mappa semplicemente cliccando sulla mappa potremo prelevare il link da divulgare oppure inserire la nostra mappa direttamente sul nostro sito. Basterà infatti scaricare il file kml e utilizzare georss per indicargli da dove prelevare coordinate, percorsi e altro.

Per prima cosa andiamo su google maps. Cliccando sulla linguetta 'le mie mappe' potremo creare una nuova mappa e inserirne il titolo e descrizione della mappa:

google maps kml mapplets percorsi

google maps kml mapplets percorsi

Una volta creata la mappa ci potremo spostare nella zona in cui ci interessa creare la nostra personalizzazione. Abbiamo a disposizione un set di strumenti:

google maps kml mapplets percorsi

In ordine con essi potremo spostarci sulla mappa, creare segnaposti, disegnare linee(o percorsi) e disegnare forme geometriche.

Cliccando sullo strumento segnaposto e poi sul punto della mappa in cui inserirlo verrà inserito il segnaposto e chiesto il titolo e la descrizione.

google maps kml mapplets percorsi

Con lo strumento riga potremo disegnare i percorsi ed anche ad essi associare titolo e descrizione. Cliccando sull'icona in alto potremo inoltre cambiare le caratteristiche della linea, colore, spessore, opacità. Potremo inserire quanti percorsi desideriamo e possiamo modificarli spostandone i punti o aggiungendone di nuovi:

google maps kml mapplets percorsi

google maps kml mapplets percorsi

google maps kml mapplets percorsi


Potremo inoltre disegnare forme e anche in questo sceglierne colore e opacità, inserire descrizione e titolo. Scegliendo rich text potremo formattare il testo in html con grassetto, corsivo e inserire addirittura immagini inserendone l'url.

google maps kml mapplets percorsi

Cliccando sul segnaposto potremo inoltre modificarne le caratteristiche scegliendo l'icona più adatta tra quelle messe a disposizione da google maps. Basterà cliccare nella popup di modifica sull'icona in alto a destra:

google maps kml mapplets percorsi

Ecco il risultato finale dell'esperimento:

google maps kml mapplets percorsi

google maps kml mapplets percorsi

A questo punto non ci rimane che utilizzare la mappa. Come? O prelevando il link alla mappa (Collegamento a questa pagina, in alto a destra) o riutilizzandola per inserirla in una nostra pagina web su un nostro sito integrandola perfettamente in grafica. Il questo caso cliccheremo sul link KML e scaricheremo in nostro file kml.

google maps kml mapplets percorsi

Questo file andrà inserito in una cartella del nostro sito internet (magari rinominandolo in modo da non avere spazi. Es. prova.kml).
Nella nostra pagina web avremo uno script in tutto simile a quello visto in:
Script ajax: Caricare su Google maps coordinate da xml o feed rss con georss
con la differenza che come url per il file da cui prendere le coordinate non avremo il file xml ma il file KML. Anche in questo caso scriviamo l'url assoluto.
Es:
<script type="text/javascript">
currentdata=new Date();
var datatime=currentdata.getTime();
var map;
var geoXml = new GGeoXml("http://www.dominio.com/prova.kml");

function load() {
if (GBrowserIsCompatible()) {
map = new GMap2(document.getElementById("map"));
map.addControl(new GLargeMapControl());
map.setCenter(new GLatLng(41.928336,12.523727), 11);
map.addControl(new GLargeMapControl());
map.addOverlay(geoXml);
}
}
</script>
Il risultato sarà una mappa centrata alle coordinate e allo zoom segnati in map.setCenter ma con tutto ciò che abbiamo creato nelle le mie mappe.

Consiglio: per trovare le coordinate e lo zoom su cui centrare la mappa cliccare su Collegamento a questa pagina. Si avrà un url a cui sono passati dei parametri. La parte che ci interessa è quella finale:
&ll=41.928336,12.523727&spn=0.362704,0.6427&z=11&om=1
Il parametro ll ci da le coordinate 41.928336 e 12.523727 e il parametro z ci da lo zoom.

Per le altre voci e su come ottenere la API KEY consultate anche:

Script ajax: Inserire una mappa di google maps nel proprio sito
Script ajax: Visualizzare sul proprio sito un indirizzo con Google maps
Script ajax: Caricare su Google maps coordinate da xml o feed rss con georss

Per finire lo script completo per la pagina 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/prova.kml");

function load() {
if (GBrowserIsCompatible()) {
map = new GMap2(document.getElementById("map"));
map.addControl(new GLargeMapControl());
map.setCenter(new GLatLng(41.928336,12.523727), 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>





Commenti


  Christian

9/12/2007 22:26:25

Ho un piccolo problema che non riesco a risolvere! Ho utilizzato questa guida per implementare in un sito una mappa con dei marcatori conteneti informazioni e fotografie, mi capita però che "a volte" non vengano caricati, poi faccio F5 e si vedono, navigo un attimo all'interno del sito in altre pagine ed appena ritorno su quella dove vi è la mappa non ci sono più i marcatori per l'ennesima volta. C'è qualcuno che saprebbe dirmi come mai accade questo?
Vi ringrazio
Christian



  Fabio

9/12/2007 22:39:11

Umm mi pare strano.. a meno che non vada in conflitto qualcosa dello script con la pagina da te creata.
La stessa cosa avviene con ie e firefox?
onload lo hai messo nel body? (avevo avuto problemi a metterlo fuori)

  Francesco

10/12/2007 10:19:25

Ho un grosso problema! ho creato il mio file .kml su google maps l'ho salvato e poi trovando questo post che faceva al caso mio ho seguito le indicazioni ma non mi funziona! mi appare la pagina con la mappa ma senza le info del mio file kml! qualcuno ha una spiegazione? dove sbaglio?

ciao-ciao

  Fabio

10/12/2007 10:26:48

@Francesco:
hai messo l'url assoluto del file kml?

  Francesco

10/12/2007 10:36:39

"purtroppo" l'ho messo...ma niente!

  Fabio

10/12/2007 10:53:01

ti sei creato anche la key e la stai usando nella cartella per cui hai fatto la richiesta?

  Francesco

10/12/2007 11:09:31

eh si...non ne esco! ci provo ancora per poco e se non riesco ho visto che su gpsvisualizer.com me lo importa senza difficoltà! però mi dispiace non capire dove sbaglio...grazie dell'interessamento comunque!

  Fabio

10/12/2007 11:14:10

se mi scrivi una mail dall'area contatti ti invio il file su cui ho fatto il test cosi provi se ti funziona. A me funziona correttamente.
Il file kml è nella stessa directory per cui è settata la key? (non credo sia necessario...ma si sa mai...)

  Francesco

10/12/2007 11:52:32

La directory è la stessa...ti scrivo dall'area contatti! grazie!

  Christian

11/12/2007 12:08:24

Per Fabio.
Grazie della risposta, ho provveduto a ricontrollare il tutto e mi sembra sia tutto ok, anche la voce onload nel body, che fra il resto se non ci fosse non mi permetterebbe di visualizzare nulla.
Oggi per esempio mi funziona tutto regolare, ma se solo navigo un attimo mi crea quel errore di cui ho parlato nel precedente post.
Diciamo che è un errore che mi ha spiazzato, preferirei non funzionasse nulla piuttosto che così.
Per ora ti ringrazio della disponibilità.
Christian


  Elisa

11/2/2008 15:41:54

Ciao a tutti. Sto impazzendo. Sto creando una mappa con google ma se inserisco più di 200 punti, quelli in eccesso li inserisce in automatico in un'altra mappa.....come mai?

  Rocco

13/2/2008 17:16:14

Scusatemi ma non capisco dov' è il File KML. Scusate ma forse sarò orbo.
Grazie

  Fabio

14/2/2008 15:44:35

Ora han messo la voce 'Visualizza in Google Earth'. Il file che scarichi è un KML

  antonio

27/2/2008 16:08:52

non capisco come fare per inserire un url assoluto...
uso liferay ed il file l'ho messo in ext-web...
in pratica la mia mappa si trova all'interna di una portlet
grazie

  Drugo83

17/3/2008 14:18:07

Salve a tutti, avrei una domanda a cui per ora non ho trovato risposta, vorrei visualizza un percorso stradale su mappa inserendo delle coordinate che prendo da un DB, con queste coordinate creo un xml ma poi? come faccio a far capire a google che deve unire i punti tramite le strade esistenti? per ora mi unisce i punti con delle linee rette!!!
Grazie

  rachele

11/4/2008 17:51:26

una domanda.
se all'interno dei marker che creo nella mia mappa inserisco un lik con target ad un iframe del mio sito..funziona?

  Dario

25/5/2008 4:18:41

Ciao!figata il tuo articolo!..ho un unico problema!: quando importo la mia mappa in formata kml, l'icona che avevo messo sul mio marker, si vede più piccola rispetto a quella che ho nelle "le mie mappe" su google maps!!!come mai??credo che le setti automaticamente 32x32, mentre nella mia vera mappa è + grande!COME FACCIO??AIUTOOOOOO!!

  fragalax

27/9/2008 18:40:17

hai settato questa riga? <div id="map" style="width: 500px; height: 300px"></div>

  Smash

1/3/2009 14:10:58

E se vorrei la fienstra del marker aperta come faccio?
Le ho provate tutte ma proprio non riesco... openwindows e qualcosa ma niente...
Vorrei che si apre l'info box appena carico la pagina qualcuno può darmi una mano?
grazie mille!

  pgreko

15/5/2009 18:14:05

Ciao,
ho seguito questa guida per inserire delle google map sul mio sito, tutto funziona correttamente. C'è una piccola "anomalia"che mi sta facendo impazzire: se inserisco un marker personalizzato nella mappa in google map, quando vado a visualizzare la mappa sul mio sito il marker personalizzato viene visualizzato sgranato.
Qualcuno sa come risolvere questo problema?
Grazie

  Fabio

15/5/2009 19:30:40

è un'immagine PNG?

  pgreko

15/5/2009 21:41:49

Si, comunque ho provato sia con un PNG che con un GIF.

  hitmaan

27/5/2009 11:45:56

"se mi scrivi una mail dall'area contatti ti invio il file su cui ho fatto il test cosi provi se ti funziona. A me funziona correttamente.
Il file kml è nella stessa directory per cui è settata la key? (non credo sia necessario...ma si sa mai...)"


Riprendendo questo post se fosse possibile vorrei chiedervi se fosse possibile inviare via mail anche a me per provare.





Lascia un commento


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