Introduzione
Google Mashup Editor (GME) è uno degli strumenti più attesa e utili per gli sviluppatori di mashup. GME aiuta gli sviluppatori a creare e modificare componenti dinamici nelle pagine web, ad esempio mappe, tabelle, elenchi e altri elementi, in base a connessioni con dati esterni. Questi elementi possono essere inclusi nelle pagine web e nei blog utilizzando un iframe.Questo tutorial ti mostrerà come incorporare un file KML in una mappa creata con GME.
Le mie prime impressioni su Google Mashup Editor
- Ha la massima semplicità, con un'interfaccia pulita e distinta, come la maggior parte dei prodotti Google.
- Ha un comodo indice di progetto con una raccolta costantemente in aumento di esempi di codice, nonché il codice dell'autore.
- Semplifica l'archiviazione di risorse aggiuntive per il progetto (come i file immagine).
- Ha un debugger XML facile da usare.
- Ci sono tantissime applicazioni di esempio di facile utilizzo.
GME per sviluppatori KML
Prima dell'avvento di Internet, i dati spaziali erano difficili da condividere. Tuttavia, con lo sviluppo di Internet, le applicazioni di mappatura sono diventate un modo standard per condividere facilmente i dati GIS (Geographic Information Systems) con il mondo. KML sta diventando uno standard per la presentazione e lo scambio di dati GIS perché è compatto, facile da sviluppare ed è supportato da applicazioni popolari come Google Earth e Google Maps.
Fino a poco tempo fa, il processo di creazione e modifica di pagine basato su JavaScript rappresentava un grosso problema per gli sviluppatori KML. Ha richiesto un numero elevato di passaggi aggiuntivi per creare un mashup ed eseguirne il debug. GME consente di creare un mashup basato su KML molto rapidamente con alcuni componenti di base. Il processo di creazione non richiede conoscenze speciali di HTML o JavaScript. I progetti di esempio GME forniscono dati sufficienti per iniziare.
Nel seguente esempio, utilizzeremo un file KML che rimanda alla raccolta delle fotografie scattate durante i voli Pict Earth USA.
Questa è un'istantanea del mashup di Maps Pict Earth:
Ecco la procedura per integrare un file KML in un progetto GME utilizzando l'API Google Maps:
Passaggio 1: seleziona il file KML
Passaggio 2: crea un nuovo progetto GME
Passaggio 3: crea una funzione per aggiungere il file KML
Passaggio 4: aggiungi una mappa
Passaggio 5: testa il mashup
Passaggio 6: pubblica il mashup 1}
11}
Passaggio 1: seleziona il file KML
Seleziona il file KML che vuoi aggiungere alla mappa. Può essere qualsiasi funzionalità con funzionalità supportate in Google Maps. Deve essere ospitato su un server disponibile pubblicamente.
Passaggio 2: crea un nuovo progetto GME
Crea un nuovo progetto GME vuoto.
Ecco come si presenta un progetto GME vuoto:
Aggiungi un titolo e un nome per la funzione.
<gm:page title="Pict Earths missions" autentica="false" onload=" creare file KMLPE"></gm:page>
Passaggio 3: crea una funzione per aggiungere il file KML
Creare una funzione JavaScript con il percorso del file KML da aggiungere alla mappa.
<script>
function kmlPE()
{
<!-- Get map -->
var myMap = google.mashups.getObjectById('map').getMap();
<!-- Get KML -->
var geoXml = new GGeoXml("http://pictearthusa.com/kml/missions.kml");
<!--Place KML on Map -->
myMap.addOverlay(geoXml);
<!--Set zoom on double click -->
myMap.enableDoubleClickZoom();
}
</script>
Passaggio 4: aggiungi una mappa
Aggiungi mappa e parametri.
<gm:map id="map" height="400px" width="400px" lat="32.9393" lng="-117.206" zoom="9" maptypes="true"/>
Passaggio 5: testa il mashup.
Premi il pulsante Test (F4).
Questa è un'immagine del mashup Pict Earth testato nella Sandbox.
Ora possiamo verificare il testo della richiesta e vedere il primo risultato. Possiamo aggiungere un titolo e i link e testarli di nuovo.
Passaggio 6: pubblica il mashup
Imposta il nome del progetto e pubblicalo. In questo modo, otterrai un link permanente al mashup, che puoi utilizzare per incorporarlo nelle pagine web. Utilizzando il mio esempio, questo è il link alla home page del progetto GME. Puoi anche visualizzare il codice sorgente del progetto.
Passaggio 7: aggiungi il mashup a una pagina web
Aggiungi il mashup a una pagina web utilizzando un iframe. Ad esempio, per inserire il progetto di esempio, aggiungi questo:
<iframe style="WIDTH: 439px; HEIGHT: 491px" src="http://pemissions.googlemashups.com/" frameborder="0"></iframe>
Ecco alcuni esempi del mashup in una pagina web e in un blog.
Puoi anche aggiungere il codice Google Analytics al progetto, in modo da poter monitorare le statistiche relative agli utenti che visualizzano la tua pagina. Ecco il semplice script per aggiungerlo:
<script src="http://www.google-analytics.com/urchin.js" type="text/javascript"></script>
<script type="text/javascript">uacct = "youraccountnumber";urchinTracker();</script>
Passaggio 8: inseriscilo nella galleria di GME
Pubblica il tuo mashup nella GME Mashup Gallery. In questo modo, altri utenti potranno visualizzare il tuo mashup.
Per ulteriori informazioni:
Consulta la Guida introduttiva di Google Mashup Editor, che presenta in dettaglio il processo di creazione di mashup. Consulta anche l'elenco dei tag per una breve descrizione di tutti i tag gm con esempi.
Codice:
Ecco il codice completo per l'utilizzo del file KML di Pict Earth in GME:
<gm:page title="Pict Earth missions" authenticate="false" onload="kmlPE()>
<!-- Map definition -->
<gm:mapid="map" height="400px" width="400px" lat="32.9393" lng="-117.206" zoom="9" maptypes="true"/>
<script>
function kmlPE(){
<!-- Get map -->
var myMap = google.mashups.getObjectById('map').getMap();
<!-- Get KML -->
var geoXml = new GGeoXml("http://pictearthusa.com/kml/missions.kml");
<!-- Place KML on Map -->
myMap.addOverlay(geoXml);
<!-- Set zoom on double click -->
myMap.enableDoubleClickZoom();
}
</script>
</gm:page>
Passaggi successivi
Dopo aver pubblicato il mashup, puoi utilizzare il file KML al suo interno come parametro da includere in un'altra applicazione o caricare direttamente come mappa. Ad esempio, in questa pagina:
http://param.googlemashup.com è un mashup GME. Puoi fare riferimento direttamente a un file KML nel mashup aggiungendo nginx= come parametro nell'URL, in questo modo: http://param.googlemashups.com/?placeholder=http://map Gadgets.googlepages.com/cta.placeholderPuoi anche creare un gadget dal tuo progetto. Una volta inviato, vai al menu del file e fai clic su Invia gadget, quindi segui le istruzioni. In questo modo puoi aggiungere facilmente l'applicazione alla tua home page personalizzata di Google su altre pagine web e condividerla con altri.