Script ajax: Mappe personalizzate kml su google maps con georss e Mapplets
difficoltà:
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:
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:
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.
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:
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.
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:
Ecco il risultato finale dell'esperimento:
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.
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">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.
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>
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&v=2&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>
Social:
Donazione:
Permalink:
Tag:
Script Simili:
Script ajax: Caricare su Google maps coordinate da xml o feed rss con georss
Script ajax: Visualizzare sul proprio sito un indirizzo con Google maps
Script ajax: Inserire una mappa di google maps nel proprio sito
Script ajax: Trovare la posizione di un IP su google maps
Permalink:
Link utili:
Vota:
Commenti
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)
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
10/12/2007 10:26:48
@Francesco:
hai messo l'url assoluto del file kml?
10/12/2007 10:53:01
ti sei creato anche la key e la stai usando nella cartella per cui hai fatto la richiesta?
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!
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...)
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
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?
13/2/2008 17:16:14
Scusatemi ma non capisco dov' è il File KML. Scusate ma forse sarò orbo.
Grazie
14/2/2008 15:44:35
Ora han messo la voce 'Visualizza in Google Earth'. Il file che scarichi è un KML
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
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
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?
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!!
27/9/2008 18:40:17
hai settato questa riga? <div id="map" style="width: 500px; height: 300px"></div>
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!
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
15/5/2009 19:30:40
è un'immagine PNG?
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.
Feed Rss
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