[maptype=G_HYBRID_TYPE;width=120;height=200;panzoomcontrol=hide;overviewmapcontrol=hide;scalecontrol=hide;maptypecontrol=hide;]
Ungern nur "kopiere" ich Inhalte von fremden Webseiten. Andererseits finde ich dieses Tutorial so hilfreich, dass ich um eine Übersetzung ins Deutsche nicht herumkomme, damit auch ihr in Zukunft oben genannte Möglichkeiten habt. Alle Ehre für das Tutorial allerdings gebührt in nahezu vollem Umfang Mark Guim vom Nokia Blog. Von mir selbst stammen nur Übersetzung, einige kleine inhaltliche Korrekturen und auf die deutschen Websites angepasste Screenshots! Eine einzige Zusatzproblematik hat sich allerdings beim Schreiben des Artikels noch ergeben - Wie bekomme ich das Ergebnis in Wordpress integriert? Dies stellte sich nämlich auch nicht als so einfach heraus, wird aber ebenfalls von mir erklärt.
Doch worum geht es eigentlich? Mithilfe des kostenlosen Nokia Sports Trackers, über den wir ja schon vielfach berichtet haben, kann man durch einen angeschlossenen GPS-Receiver ähnlich wie mit AFTrack seine Bewegungen aufzeichnen, verschiedenen Übungsgruppen (Radfahren, Laufen, etc.) zuordnen und so die eigene Leistung darstellen und auch langfristig vergleichen.
Diese Informationen lassen sich auch sehr einfach und komfortabel auf die Nokia Sports Tracker Website laden und dort mit anderen Nutzen sharen. Dumm nur, dass man sie auf diese Weise nicht direkt in die Website einbinden kann. Abhilfe schafft hier ein Workaround über Google Maps, die ihr wiederum völlig problemlos in eure Webseite einbinden könnt.
[Quelle: The Nokia Blog]
Ziel der Operation
Wir möchten mithilfe der im Nokia Sportstracker erfasste Daten auf jeder Website einfach veröffentlichen können. Natürlich soll die Karte voll interaktiv sein. Im Endeffekt soll das ganz beispielsweise einmal folgendermaßen aussehen:
Beispielkarte von der ersten Testfahrt mit meinem Merida T3 Speeder [maptype=G_HYBRID_TYPE]
Abwandlungen in der Darstellung sind natürlich möglich, dazu aber später im Zusammenhang mit der Integration mehr.
Voraussetzungen
- Symbian S60 3rd Edition Smartphone - egal welches, egal ob mit oder ohne GPS
- einen internen oder externen GPS-Empfänger
- den installierten Nokia Sports Tracker (kostenlos), am besten in der aktuellsten Version
- Einen Account auf der Nokia Sports Tracker Website
- Einen Account bei Google Maps
- In "normale Webseiten" könnt ihr den Code ggf. sehr einfach integrieren, dies erkläre ich ebenfalls. Nur für die Integration in Blogs etc. benötigt ihr eventuell:
- Einen Google Maps Api-Key
- Gegebenenfalls das ein oder andere Plugin zur Integration in euer Blog. Ich erkläre eine (wie ihr seht funktionierende!) Lösung im Zusammenhang mit selbst administrierten Wordpress Blogs und nenne auch das nötige Plugin dazu und erkläre dessen Funktionsweise.
Schritt 1 - Daten erfassen
Gehen wir mal davon aus, dass ihr das Programm installiert habt. Damit wir Daten darstellen können, müssen solche natürlich also zunächst einmal erfasst werden. Solltet ihr also bislang noch keine Daten erfasst haben, dreht einfach eine Runde zu Fuß durch den nächsten Park oder schwingt euch 'ne Runde aufs Rad..
Natürlich kann man hier auch kreativere Ideen und Vorhaben verfolgen. In dem Zusammenhang soll auch einmal das Projekt bzw. die Nokia-Kampagne "Stavros - Position Art / The World is my Canvas" erwähnt sein, über die glaube ich so ziemlich jedes Blog außer uns berichtet hat und in jedem Fall einen Blick wert ist. Dies soll aber nicht unser Thema für heute sein, für kreative Vorschläge bin ich jedoch immer offen.
Schritt 2 - Daten zur Nokia Sports Tracker Website übermitteln
Dieser Schritt ist wirklich einfach, dennoch: einige Tipps und Tricks für diejenigen unter uns, die nicht so gut Englisch können:
- In der Übersicht des Nokia SportsTracker findet ihr das "Training Diary". Hierin seht ihr eine kalendarische Übersicht eurer aufgezeichnetten Aktivitäten.
- Wenn ihr eine komplette Übersicht über alle Aktivitäten haben wollt, wählt ihr am besten "Options" -> "Listview". Das verbessert meines Erachtens die Übersicht erheblich. Außerdem seht ihr in der Übersicht auch direkt, ob ihr die Daten bereits mit dem Sports Tracker Server synchronisiert habt - dies wird durch den kleinen grünen Pfeil neben den Daten signalisiert (siehe Screenshot unten)
- Wählt den gewünschten Eintrag und klickt wiederum auf "Options" und wählt dort "Upload to service" um die Daten zur Nokia Sportstracker Website hochzuladen.
Schritt 3 - Datenexport für Google Maps und Google Earth vorbereiten
Im nächsten Schritt müsst ihr euch in euren Nokia Sports Tracker Account auf der ensprechenden Website einloggen. Am einfachsten geht das wohl über jeden gängigen Desktop-Browser. Ob das auch über das Handy funktioniert, habe ich bislang nicht getestet..
Wählt einfach aus der Übersicht den Datensatz aus, den ihr darstellen möchtet. Klickt danach ganz oben auf den Menüpunkt "Download as a KML file" und speichert die Datei die euch zum Download angeboten wird, irgendwo dort wo ihr sie schnell findet. Diese brauchen wir nämlich in einem der nächsten Schritte direkt wieder. Wenn ihr bereits Google Earth installiert habt, wird euer Rechner wahrscheinlich erkennen, dass die Datei mit Google Earth direkt geöffnet werden kann. Auch eine schöne Option falls ihr sie nutzen möchtet, aber nicht Ziel unseres Tutorials - wir benötigen die gespeicherte Datei!
Zusätzlicher Hinweis: Möchtet ihr nur auf diese Daten auf der Nokia Sports Tracker Website verweisen, geht das natürlich auch!
Klickt dazu einfach auf den Punkt "Link to this page". Damit könnt ihr den benötigten Link auch ganz einfach in jede Website oder E-Mail einbinden. Ist aber ebenfalls nicht unser Ziel - wir wollen das Ganze mit Google Maps erreichen und so auch voll interaktiv innerhalb der eigenen Webseite nutzen können!
Natürlich könnt ihr den Datensatz vorher noch bearbeiten, mit weiteren Infos sowie Photos spicken und so weiter. Aber dazu ein andermal. Das meiste davon dürfte auch mit geringen Englischkenntnissen ohnehin weitgehend intuitiv sein.
Schritt 4 - Import der Daten in Google Maps
Eigentlich findet ihr den kompletten Vorgang recht gut anhand der unten aufgeführten Screenshots erklärt. Dennoch, in wenigen einfachen Schritten die wichtigsten Informationen zur individuellen Anpassung:
- Wählt im ersten Schritt "Neue Karte erstellen". (Siehe Screenshot Nr. 1)
- Im nächsten Bildschirm könnt ihr eurer neuen Karte bereits einen Namen und eine Beschreibung hinzufügen. In jedem Fall müsst ihr danach aber auf "Importieren" klicken. (Siehe Screenshot Nr. 2)
- Sucht die KML-Datei, die ihr vorher von der Nokia Sports Tracker Website in Schritt 3 gespeichert habt. (Siehe Screenshot Nr. 3)
- Als nächstes könnt ihr die Farbe der Strecke anpassen, die Ansicht definieren und vieles mehr. Dazu gibt es aber sicherlich schon ausreichend Tutorials und deshalb will ich hier nicht auf alle Möglichkeiten eingehen. Ich persönlich finde es ggf. wichtig die Streckenfarbe anzupassen, empfinde die Satellitendarstellung als angenehmer und versuche immer auf eine optimale Ansicht heranzuzoomen. Natürlich könnt ihr auch noch Bilder zu bestimmten Wegpunkten hinzufügen oder die Strecke mit Textinfos anreichern.
Wenn alle Einstellungen korrekt sind und euch die Ansicht gefällt, klickt einfach abschließend auf "URL zu dieser Seite". (Siehe Screenshot Nr. 4) - Wie auch bei der Nokia Sports Tracker Website könnt ihr euch an dieser Stelle ganz leicht den Link abgreifen und ihn z.B. in eine E-Mail einbinden oder per Instant Messenger verschicken. Diesen Link benötigen wir auch später für die Integration in das eigene Wordpress-Blog.
Aber auch die Integration in die eigene Website ist kein Problem mehr - benutzt dazu einfach den Codebaustein, der im zweiten Feld dargestellt wird. Mit ein wenig Hintergrundwissen kann man diesen natürlich auch anpassen. (Siehe Screenshot Nr. 5) - Noch einfacher geht dies aber, indem ihr auf "Eingebettete Karte anpassen und Vorschau anzeigen" klickt. Hierüber könnt ihr z.B. ganz einfach die individuelle Größe bestimmen, in der die Karte auf eurer Website dargestellt werden soll. (Siehe Screenshot Nr. 6)
Schritt 5 - Eure Google Maps in die eigene Webseite einbinden
Wenn ihr über eine "normale" Webseite verfügt oder über eine solche, die Eingaben nicht direkt wegfiltert, müsst ihr eigentlich nur den Code aus Schritt 4, Screenshot Nr. 5 und 6 kopieren und im Editor einfügen und alles sollte erwartungsgemäß dargestellt werden.
Komplizierter wird das Ganze eventuell, wenn ihr eure Inhalte über ein Contentmanagementsystem oder Blog administriert. Hier kann es vorkommen, dass Eingaben herausgefiltert werden. So zum Beispiel bei Wordpress, welches nicht alle freien Eingaben von HTML erlaubt.
Bei verschiedenen Redaktionssystemen werdet ihr ab hier wohl eigene Lösungen finden müssen, für Wordpress gibt es eine recht einfache Lösung..
Schritt 6 - Einbinden der Google Maps in das eigene Wordpress Blog
Wie meine eigene Erfahrung gezeigt hat, war es zumindest mir nicht möglich, einfach den angegebenen Quelltext mit dem iframe in den Wordpress WYSIWYG-Editor einzubinden. Wer es dennoch versucht und wem es dann auch noch so wie mir geht, der sieht auf einmal gar keinen Text mehr, wo vorher noch welcher stand. Auch der Zugriff auf den Quellecode wird unterbunden. Also, was tun wenn es euch doch einmal passiert?
Die Lösung ist jedoch einfach: Deaktiviert einfach Javascript im Browser und ruft den Artikel erneut zur Bearbeitung auf. Daraufhin steht euch zwar nicht mehr der komfortable Editor zur Verfügung, sondern ihr seht nur noch HTML-Quelltext. Löscht in diesem einfach den Teil mit dem iframe und speichert euren Entwurf. Danach könnt ihr Javascript wieder aktivieren und den Entwurf normal weiterbearbeiten - der vorher geschriebene Text ist auch wieder vorhanden insofern ihr ihn nicht aus Versehen mitgelöscht habt..
Also wird ein Workaround benötigt, die meines Erachtens beste Lösung ist wie folgt:
- Ladet euch das XML Google Maps Plugin für Wordpress herunter, aktuell in der Version 1.1 erhältlich.
- Ladet es per FTP in euer Wordpress-Plugins Verzeichnis hoch und aktiviert es in der Administration.
- In den Wordpress Einstellungen findet ihr nun einen neuen Menüpunkt "XML Google Maps"zur Einrichtung des Plugins.
- Hier müsst ihr mindestens euren Google Maps API-Key eingeben, den ihr hier erhalten könnt. Ohne den Key kann das Ganze nicht funktionieren! Vergesst nicht, die aktualisierten Einstellungen zu speichern!
- Wenn ihr nun eine von euch vorbereitete (oder auch jede andere) Google Map integrieren möchtet, müsst ihr diese eigentlich nur verlinken und mit einem zusätzlichen Parameter versehen. Leider gibt es hierzu keinen Button, über den das Einfügen vereinfacht wird, also manuell:
- Legt einen neuen Textlink an und verlinkt ihn auf das Ziel, das ihr euch aus Schritt 4, Screenshot Nr. 5 kopiert habt.
Ein Beispiel wie ich das oben realisiert habe:<a href="http://maps.google.com/...aus Platzgründen gekürzt.../394.00044944c10ca7762ecda">Beliebiger Text hier</a> - Allerdings benötigt ihr dazu einen weiteren Baustein der klarstellt, wie die Karte dargestellt werden soll und ungewöhnlicherweise in den Linktext integriert werden muss. Die einfachste Möglichkeit wäre einfach ein [maptype=G_HYBRID_TYPE], welches nur angibt, dass die Karte im Hybridmodus angezeigt werden soll. Unser vollständiges Beispiel sähe also wie folgt aus:<a href="http://maps.google.com/...aus Platzgründen gekürzt.../394.00044944c10ca7762ecda">Beliebiger Text hier [maptype=G_HYBRID_TYPE]</a>
- Legt einen neuen Textlink an und verlinkt ihn auf das Ziel, das ihr euch aus Schritt 4, Screenshot Nr. 5 kopiert habt.
Auf Patrick Matusz Website gibt es allerdings noch zahlreiche andere Beispiele zur Integration der Karten in Wordpress und eine Vielzahl von weiteren Parametern, mit denen die individuelle Einstellung für die Anzeige möglich ist. Eine individuell andere Darstellung derselben Map wie oben könnte man z.B. auch so realisieren:
Weitere Möglichkeiten zu Positionierungsdaten und Google Maps
Möglichkeiten gibt es sicher noch viele, einige nur als Beispiel:
- Ihr startet ein virtuelles Wettrennen über x Kilometer - jeder an seinem eigenen bevorzugten Ort - und ihr könnt perfekt die Strecken, Zeiten usw. miteinander vergleichen.
- Auch (virtuelle) Stadtführungen mit interessanten Informationen an den jeweiligen Orten der Sehenswürdigkeiten und Bilder dazu könnt ihr so online stellen.
- Aber auch "Location Art" wie Stavros könnt ihr so ab sofort selbst erstellen - ich würde mir dann aber eventuell bereits im Vorfeld mein "Kunstwerk" ordentlich planen und eine exakte Strecke vorbereiten.
- Mein nächster (Trainnigs-) Plan beinhaltet die Aufzeichnung aller gelaufenen und gefahrenen Strecken mit meinem "Ferienhund". Dann aber eventuell auch im direkten Vergleich mit dem kommerziellen Pendant AFTrack - und vielleicht einem neuen Tutorial dazu
Ich hoffe das Tutorial hat euch gefallen und ich habe keinerlei Fragen offen gelassen. So könnt ihr ab sofort euren Ideen zu Positionierungsdaten freien Lauf lassen! Vielleicht rufen wir ja in Zukunft sogar zu einem kleinen Wettbewerb auf - wenn euch dazu eine lustige Idee einfällt, hinterlasst doch bitte einen Kommentar..
Kommentare
Kommentar hinterlassen Trackback