GMapsGPX ist eine Javascript-Klasse zum Anzeigen von GPX-Dateien (GPS Exchange Format) in Google-Maps auf der eigenen Webseite. Dazu liest GMapsGPX die GPX-Datei von einer beliebigen URL, die vom Web-Browser erreichbar sein muss. Die Verarbeitung findet komplett im Browser statt, eine Server-seitige Komponente ist nicht erforderlich.
Voraussetzungen
- Prototyp-Bibliothek
- Browser, der von Prototype und Google-Maps unterstützt wird
Einbinden in HTML
01: <html>
02: <head>
03: <script type='text/javascript' src='prototype.js'></script>
04: <script type='text/javascript' src='GMapsGPX.js'></script>
05: <script src="http://maps.google.com/maps?file=api&v=2&key=MY-API-KEY" type="text/javascript"></script>
06: <script type='text/javascript'>
07: function load() {
08: gpx = new GMapsGPX('track.gpx', 'map');
09: gpx.setOption('trkStep', 10);
10: gpx.show();
11: }
12: </script>
13: </head>
14: <body onload='load();'>
15: <div id='map' style='width: 500px; height: 350px'></div>
16: </body>
17:</html>
Zunächst wird die Prototyp-Bibliothek (Zeil 3), GMapsGPX (Zeile 4) und die Google-Maps-API (Zeile 5) geladen. MY-API-KEY ist durch den eigenen Google-API-Key zu ersetzen. In den Zeilen 7-11 wird die Funktion load() definiert, die mittels onload-Attribut des BODY-Elements geladen wird (Zeile 14). In Zeile 15 wird ein DIV-Container definiert, in dem die Karte dargestellt wird. Die ID des Containers wird beim Instanziieren der Klasse GMapsGPX als 2. Parameter des Konstruktors angegeben. Der erste Parameter ist die URL der GPX-Datei. Mit der Methode GMapsGPX.setOption() können unterschiedliche Parameter gesetzt werden (z.B. Zoom-Einstellung der Karte) bevor mittels GMapsGPX.show() die Karte dargestellt wird.
Beispiel (eine meiner Lauf-Trainings-Stecken, GPX-Datei direkt von Garmin eTrex Legend HCx):
Download
Kommt bald.
