KML im Google Mashup Editor verwenden

Valery Hronusov, KML-Entwickler, Perm State University, Russland

Einführung

Der Google Mashup Editor (GME) ist eines der lang ersehnten und nützlichsten Tools für Mashup-Entwickler. Mit GME können Entwickler dynamische Komponenten auf Webseiten, z. B. Karten, Tabellen, Listen und andere Elemente, erstellen und bearbeiten, die auf Verbindungen mit externen Daten basieren. Diese Elemente können dann mithilfe eines iFrames in Webseiten und Blogs eingebunden werden.

In dieser Anleitung erfahren Sie, wie Sie eine KML-Datei in eine mit GME erstellte Karte einbinden.


Meine ersten Eindrücke vom Google Mashup Editor

  • Es ist äußerst intuitiv und hat eine klar strukturierte Benutzeroberfläche, wie die meisten Google-Produkte.
  • Sie bietet einen praktischen Projektindex mit einer stetig wachsenden Sammlung von Codebeispielen sowie dem Code des Autors.
  • Sie ermöglicht das einfache Speichern zusätzlicher Ressourcen im Projekt, z. B. Bilddateien.
  • Es verfügt über einen nutzerfreundlichen XML-Debugger.
  • Es enthält viele nutzerfreundliche Beispielanwendungen.

Google Maps Engine für KML-Entwickler

Vor der Einführung des Internets war die Weitergabe von räumlichen Daten schwierig. Mit der Entwicklung des Internets wurden Kartierungsanwendungen jedoch zu einer Standardmethode für die einfache Freigabe von GIS-Daten (Geographic Information Systems) weltweit. KML wird zu einem Standard für die Darstellung und den Austausch von GIS-Daten, da es kompakt, einfach zu entwickeln ist und von beliebten Anwendungen wie Google Earth und Google Maps unterstützt wird.


Bis vor Kurzem war das Erstellen und Bearbeiten von Seiten mit JavaScript ein großes Problem für KML-Entwickler. Es war eine Vielzahl zusätzlicher Schritte erforderlich, um ein Mashup zu erstellen und Fehler zu beheben. Mit GME können KML-basierte Mashups sehr schnell aus einigen grundlegenden Komponenten erstellt werden. Für die Erstellung sind keine besonderen HTML- oder JavaScript-Kenntnisse erforderlich. Die GME-Beispielprojekte sind ausreichend für den Einstieg.

Im folgenden Beispiel verwende ich eine KML-Datei, die auf die Sammlung der Fotos verweist, die bei Pict Earth USA-Flügen aufgenommen wurden.


Dies ist eine Momentaufnahme des Karten-Mashups von Pict Earth:
Bild: Earth-Mashup-Snapshot

So binden Sie eine KML-Datei mithilfe der Google Maps API in ein GME-Projekt ein:

Schritt 1: KML-Datei auswählen

Wählen Sie die KML-Datei aus, die Sie der Karte hinzufügen möchten. Das können alle Funktionen sein, die in Google Maps unterstützt werden. Sie muss auf einem öffentlich verfügbaren Server gehostet werden.


Schritt 2: Neues GME-Projekt erstellen

Erstellen Sie ein neues leeres GME-Projekt.

So sieht ein leeres GME-Projekt aus:

Ein leeres GME-Projekt

Fügen Sie einen Titel und einen Namen für die Funktion hinzu.

<gm:page title="Pict Earth-Missionen" authentifiziert="false" onload="kmlPE()">
</gm:page>

Schritt 3: Funktion zum Hinzufügen der KML-Datei erstellen

Erstellen Sie eine JavaScript-Funktion mit dem Pfad zur KML-Datei, die der Karte hinzugefügt werden soll.

<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>

Schritt 4: Karte hinzufügen

Karte und Parameter hinzufügen.


<gm:map id="map" height="400px" width="400px" lat="32.9393" lng="-117.206" zoom="9" maptypes="true"/>

Schritt 5: Mashup testen

Drücken Sie die Testtaste (F4).

Dies ist ein Bild des Pict Earth-Mashups, das in der Sandbox getestet wurde.

Pict Earth-Mashup in Sandbox

Jetzt können wir den Text der Bewerbung überprüfen und das erste Ergebnis sehen. Wir können einen Titel und Links hinzufügen und noch einmal testen.


Schritt 6: Mashup veröffentlichen

Legen Sie den Namen des Projekts fest und veröffentlichen Sie es. Dadurch erhalten Sie einen permanenten Link zu Ihrem Mashup, mit dem Sie es in Webseiten einbinden können. Hier ein Beispiel für den Link zur Startseite des GME-Projekts. Sie können auch den Quellcode des Projekts aufrufen.


Schritt 7: Mashup einer Webseite hinzufügen

Fügen Sie das Mashup mit einem iFrame zu einer Webseite hinzu. So fügen Sie beispielsweise das Beispielprojekt ein:


<iframe style="WIDTH: 439px; HEIGHT: 491px" src="http://pemissions.googlemashups.com/" frameborder="0"></iframe>

Beispiele für Mashups auf einer Webseite und in einem Blog


Sie können Ihrem Projekt auch Ihren Google Analytics-Code hinzufügen, um Statistiken darüber zu erhalten, wer Ihre Seite aufruft. So fügen Sie das Skript einfach hinzu:


<script src="http://www.google-analytics.com/urchin.js" type="text/javascript"></script>
<script type="text/javascript">uacct = "youraccountnumber";urchinTracker();</script>


Veröffentlichen Sie Ihr Mashup in der GME Mashup Gallery. So können andere Nutzer Ihr Mashup ansehen.



Weitere Informationen:

Im Startleitfaden für den Google Mashup Editor wird ausführlich beschrieben, wie Mashups erstellt werden. In der Tag-Liste finden Sie eine kurze Beschreibung aller gm-Tags mit Beispielen.



Code:

Hier ist der gesamte Code für die Verwendung der Pict Earth-KML-Datei 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>

Nächste Schritte

Nachdem Sie Ihr Mashup veröffentlicht haben, können Sie die darin enthaltene KML-Datei als Parameter für eine andere Anwendung verwenden oder direkt als Karte laden. Hier ein Beispiel:

http://param.googlemashups.com

ist ein GME-Mashup. Sie können KML-Dateien direkt auf das Mashup verweisen, indem Sie KML= als Parameter in die URL einfügen:

http://param.googlemashups.com/de

Sie können auch ein Gadget aus Ihrem Projekt erstellen. Klicken Sie nach dem Senden auf das Menü „Datei“, klicken Sie auf „Gadget senden“ und folgen Sie der Anleitung. Auf diese Weise können Sie Ihre App ganz einfach Ihrer personalisierten Google-Startseite oder anderen Webseiten hinzufügen und mit anderen teilen.