Zurück zur Startseite

Google Maps: KML Datei einbinden

Immer wieder mal bekomme ich Anfragen bzgl. der Darstellung der GPS-Tacks auf der Google Maps Karten in meiner Website: gps-mountainbiker.de .  In der Website werden die Karten und Höhenprofile natürlich nicht „von Hand“ erstellt. Hier habe ich das Ganze als TYPO3 Extension programmiert. Dieser Aufwand lohnt sich natürlich nur, wenn man die Karten und Höhenprofile vielfach wieder verwendet. Eine konkrete Anfrage per Mail, wie man denn die Karten in TYPO3 einbindet habe zum Anlass für diesen Artikel genommen.

Google Maps Karten in TYPO3

TYPO3 bietet das Inhaltselement „Reines HTML“ für solche  Situationen an. Hier kann man direkt HTML und auch Javascript eintragen. Eine Google Maps Karte ist nichts anderes als Javascript.

Google Maps Key

Um die Google Maps API verwenden zu können braucht man zunächst einen Key, mit dem die Domain registriert werden muß unter der die Karte angezeigt werden soll.
Key registrieren: http://code.google.com/intl/de-DE/apis/maps/signup.html

KML und GPX Dateien

Die GPS-Touren werden vom Navi als gps-Dateien erzeugt. Diese kann man mit dem Tool MapKon in eine kml- Datei konvertieren. Das Tool dazu gibt es hier: http://www.gps-mountainbiker.de/Rund-um-GPS.41.0.html . Google kann auch direkt GPX – Dateien verarbeiten. Also einfach im Script unten unter var geoXML den Pfad zu einer GPX- Datei verwenden.

Das Script

Da das Script im Quelltext einsehbar ist, brauche ich auch kein Geheimnis daraus zu machen. Hier das kommentierte Script. Also einfach kopieren und anpassen!

Dennoch habe ich in meinem Script so ein paar Tricks verabreitet
z.B. der Eintrag: geoXml.gotoDefaultViewport(map);
sorgt für eine automatische Zentrierung und Skalierung der Karte. Man muss also keine Längen- und Breitengrade für das Kartenzentrum mehr ermitteln und angeben.

<!-- Google Maps Key einfügen -->
 <script src="http://maps.google.com/maps?file=api&amp;v=2&amp;key=ABQIAAAA6X__7Ttz4jOvxQBaz6-RGBSMa52bBOb5VH1lTuL_mX-YbFXTYhRNrEBfdlFVJ4YGGZ5M0KOL-vIfXA" type="text/javascript"></script>
<div id="tx_googlemapscharts_map" style="width:600px; height:400px;border:1px solid #999999;"></div>
 <style type="text/css">
 v\:* {
 behavior:url(#default#VML);
 }
 </style>
 <script type="text/javascript">
 //<![CDATA[
 var map;
 // Hier steht der Pfad zur KML Datei, i.d.R. lädt man die Datei in den fileadmin Ordner bei TYPO3
 var geoXml = new GGeoXml("http://www.gps-mountainbiker.de/fileadmin/gpx/Groedner-Tal_Seiser-Alm-Runde.kml");
 if (!geoXml.loadedCorrectly()) {
   //alert("error loaded KML resource");
 }
 var toggleState = 1;

 function mapLoad() {
   if (GBrowserIsCompatible()) {
   // Hier sprichst man den Layer an
   map = new GMap2(document.getElementById("tx_googlemapscharts_map"));
   // Kontrollelement für Skalierung
   map.addControl(new GLargeMapControl());
   // Kontrollelement für Kartentyp
   map.addControl(new GMapTypeControl());
   // Kartenzentrum auf 0
   map.setCenter(new GLatLng(0, 0));
   // Standardzoom
   map.setZoom(10);
   // Kartentyp voreinstellen,hier Gelände
   map.setMapType(G_PHYSICAL_MAP);
   // KML Overlay hinzufügen
   map.addOverlay(geoXml);
   // Automatische Kartenzentrierung und passende Skalierung
   geoXml.gotoDefaultViewport(map);
   }
 }
 // Karte laden
 mapLoad();
 //]]>
 </script>

Für weitere Einstellungen und Anpassungen der Google Karte kommt man um die Google API nicht herum.
http://code.google.com/apis/maps/
Die Originaldatei enstammt folgender Seite:
http://www.gps-mountainbiker.de/Bozen-Dolomiten-I-Seiseralmrunde.88.0.html . Dort ist auch meine Extension im Einsatz. Sie erzeugt auch das Höhenprofil unter Verwendung einer weiteren Google API, die weit weniger bekannt ist, die Google Charts API. Wie man Diagramme mit Google erstellt, werde ich einem der nächsten Beiträge erläutern.

6 Comments to Google Maps: KML Datei einbinden

Schreib einen Kommentar