Blog zu den Themen Webentwicklung, technisches Online Marketing und Suchmaschinenoptimierung

HTML5 Geolocation API: Standort in Google Maps anzeigen

Nachdem ich vor einigen Tagen die neuen HTML5 Formulare vorgestellt habe, soll es heute um ein weiteres Spielzeug aus der großen bunten HTML5-Spielzeugkiste gehen. Gegenstand unserer Begierde ist die neue Javascript Gelocation API, mit der sich ziemlich exakt der Standort eines Besuchers ermitteln lässt. Dies funktioniert bereits in fast allen modernen Browsern und lässt sich somit bereits heute optional nutzen.

Im heutigen Artikel soll es im ersten Schritt darum gehen, die Position des Besuchers in Form von Längen- und Breitengrad zu ermitteln und diese Informationen auf der Webseite auszugeben. Im zweiten Schritt wollen wir per Google Maps API eine Karte einbetten, welche mit Hilfe eines Symbols unseren Standort kenntlich macht. Hier findet ihr eine Demo des Endergebnisses. Bevor es an den Quellcode geht, vorweg noch etwas theoretisches…

Wie funktioniert die Geolocation API?

Die Geolocation API ist eine HTML5 Javascript-Schnittstelle mit offiziellen W3C-Spezifikationen. Dabei werden vom Browser mehrere Methoden genutzt, um den besten Standort des Nutzers zu ermitteln. Das wären zum Beispiel:

  • GPS-Sender
  • WLAN-Netzwerke
  • Funk-Signale (Handynetz)
  • IP-Adresse
  • Vom Benutzer definierter Standort

Natürlich ergibt sich daraus, dass die Positionsbestimmung am heimischen PC nicht exakt sein muss. Nur die wenigsten Desktop-Rechner werden über ein 3G-Modem, geschweige denn über einen eigenen GPS-Sender verfügen, weshalb die Geolocation API auf andere Daten zurückgreifen muss. In einigen Desktop-Browsern ist es beispielsweise möglich, den aktuellen Standort (dieser wird sich ja nur selten ändern) per Hand einzutragen. Ist dies nicht der Fall, steht die IP-Adresse eine mehr oder weniger solide Fallback-Lösung dar. Je nach Provider und städtischer DSL-Infrastruktur kann die Bestimmung der Position nach IP-Adresse zwischen 1km und 100km variieren.

Richtig spannend wird die Geolocation API natürlich erst mit mobilen Geräten wie Smartphones oder Tablets, die sich immer größerer Beliebtheit erfreuen. Hier ist in fast alle Geräten ein GPS-Sender oder 3G-Modem verbaut und die Position des Nutzers lässt sich im Idealfall auf den Meter genau bestimmen.

Und wo bleibt der Datenschutz?

Die Sicherheitsbestimmungen des W3C zum Thema Geolocation API sehen ausdrücklich vor, dass der Nutzer gefragt werden muss, bevor der Browser seine Position ermitteln darf:

User agents must not send location information to Web sites without the express permission of the user. User agents must acquire permission through a user interface, unless they have prearranged trust relationships with users, as described below.

Wer sich also schon gefreut hat, in Zukunft exakte Statistiken über die Herkunft seiner Webseiten-Besucher führen zu können, den muss ich leider enttäuschen. Ohne die explizite Zustimmung des Besuchers gibt es keine Positionsdaten. In den Spezifikationen ist von einem user interface die Rede, über dass der Nutzer nach seiner Zustimmung gefragt wird. In den meisten Desktop-Browsern ist dies eine am oberen Bildschirmrand erscheinende Leiste. Browser von Smartphones zeigen hingegen häufig ein Popup, welches der Nutzer nicht übersehen kann und zu einer Eingabe (Zustimmung / Ablehnung) gezwungen ist.

Geolocation-Sicherheitsfrage im Chrome

Jedoch sollte man beachten, dass Browser Zustimmungen für Webseiten speichern können. Hier unterscheidet sich das Verhalten von Browser zu Browser aber sehr stark, weshalb man sich als Nutzer vorher informieren sollte, wo man einmal getätigte Zustimmungen bei seiner Software rückgängig machen kann.

Kann ich die Geolocation API heute bereits nutzen?

Ich bin der Meinung, dass man die Geolocation API bereits heute vollwertig in einer Webapp nutzen kann. Handelt es sich um eine klassische Webseite, sollte man die neue HTML5 API jedoch nur optional und abwärts kompatibel anzeigen.

Folgende Browser unterstützen die HTML5 Geolocation API:

  • Google Chrome
  • Mozilla Firefox 3.5+
  • Opera 10.6+
  • Safari
  • Internet Explorer 9

Als kleine Anmerkung ist zu sagen, dass die Positionsbestimmung unter Safari mir leider eine Fehlermeldung zurücklieferte. Dies kann aber auch ein Flüchtigkeitsfehler meinerseits gewesen sein.

Noch spannender als die Unterstützung der Desktop-Browser ist die Frage nach den Browsern von mobilen Betriebssystemen:

  • Android (seit Version 2.0)
  • iOS (seit OS 3.0)
  • Windows Phone 7
  • Blackberry OS 6
  • Opera Mobile 10.1+

Auch wenn es bei der ein oder anderen Plattformen noch zu vereinzelten Bugs kommt, lässt es sich nicht leugnen, dass die Geolocation API bereits bei den mobilen Browsern angekommen ist und eine solide Implementierung und Verbreitung vorweisen kann. Alleine bei Android-Geräten liegt die Verbreitung der Version 2.0 oder höher bei über 95%; unterstrichen wird diese Tatsache von der Zahl, dass weltweit jeden Tag über 700.000 neue Android-Smartphones oder -Tablets aktiviert werden.

Schritt 1: Position per Geolocation API ausgeben

Wer sich schon einmal mit Google Maps, Routenplanung oder Distanzberechnung auseinandergesetzt hat, wird die englischen Begriffe Latitude und Longitude mit Sicherheit kennen. Im deutschen stehen diese für Breiten- und Längengrad und bilden im heutigen Alltag einen wichtigen Bestandteil jeglicher Navigation und Positionsbestimmungen. Durch etliche Nachkommastellen lässt sich somit ein Ort auf unserer Erde exakt definieren.

Neben einigen anderen Attributen wie Höhe, Geschwindigkeit und Richtung – um die es aber heute auf Grund mäßiger Implementierung nicht gehen soll – stellen Latitude und Longitude die wichtigste Ausgabeinformation der Gelocation API dar.

Das folgende HTML5-Dokument beinhaltet einen div-Container, in den wir per Javascript (bei Zustimmung des Nutzers) die Koordinaten seiner Position hinterlegen:

Der Quelltext im Detail betrachtet:

  • Zeile 9 – 11
    Hier erstellen wir einen div-Container mit der ID pos, welcher nach Abruf der Position per Geolocation API entweder eine Fehlermeldung oder im Erfolgsfall die Latitude und Longitude Koordinaten des Nutzers ausgibt.
  • Zeile 14
    Wir nutzen die Funktion getCurrentPosition() des geolocation-Objekts, welche in den meisten Fällen zwei Callback-Funktionen als Parameter erwartet. Die erste Callback-Funktion wird im Erfolgsfall aufgerufen und beinhaltet das position-Objekt, welches wiederum die Koordinaten-Informationen enthält. Der zweite Callback wird im Fehlerfall aufgerufen und beinhaltet ein Javascript-Objekt mit Informationen zum Fehler, welches wir uns später nochmal anschauen werden.
  • Zeile 15
    Wie gesagt liefert der Erfolgs-Callback das Objekt position zurück, welches wiederum zwei Kinder hat. Zum einen ist das timestamp (position.timestamp); der Zeitpunkt zu dem die Position ermittelt wurde – zum anderen coords (position.coords); wiederum ein eigenes Objekt in dem die Positionsinformationen versteckt sind.
    Das Obejkt position.coords beinhaltet die Variablen latitude (Breitengrad), longitude (Längengrad), altitude (Höhe), accuracy (Genauigkeit), altitudeAccuracy (Genauigkeit Höhe), heading (Richtung), speed (Geschwindigkeit).
    Objekt unserer Begierde sind die beiden Variablen latitude und longitude, welche wir per document.getElementById() in den Container mit der ID pos schreiben.
  • Zeile 17
    Im Fehler-Callback nehmen wir keine explizite Analyse des aufgetretenen Fehlerfalls vor und geben eine allgemein gültige Fehlermeldung aus.

Im Ergebnis könnte die Ausgabe nach Zustimmung des Nutzers dann wie folgt aussehen:

Ausgabe im Firefox

Schritt 2: Position auslesen und auf Google Maps Karte ausgeben

Zugegeben, mit den Latitude und Longitude können vielleicht Hardcore-Geographen etwas anfangen, Otto-Normal-Webseite-Besucher jedoch nicht. Deshalb wollen wir die HTML5 Geolocation API mit der Google Maps API paaren und eine Karte samt Symbol auf unserer aktuellen Position ausgeben.

Dazu müssen wir unser obiges HTML5-Dokument wie folgt abändern:

Der neue Quellcode im Detail:

  • Zeile 7
    Wir betten die neueste Version der Google Maps Javascript-API ein.
  • Zeile 11
    Damit der Container pos später die Google Maps Karte anzeigen kann, benötigt er eine Breite und Höhe.
  • Zeile 33
    Anstatt die Koordinaten direkt auszugeben, übergeben wir das coords-Objekt nach Ermittlung der Position an die Funktion initialize.
  • Zeile 16
    Wir öffnen die Javascript-Funktion initialize(), welche als Parameter das coords-Objekt erwartet.
  • Zeile 17
    Die Google Maps API V3 arbeitet mit Koordinaten-Objekten zur Positionsbestimmung. Ein eben solches erstellen wir in dieser Zeile mit den im coords-Objekt übergebenen Breiten- und Längengraden. Zur Weiterverarbeitung speichern wir das Objekt in der Variable latlng.
  • Zeile 18 – 22
    Und noch ein Objekt benötigen wir, um unsere Karte zu initialisieren. Innerhalb von myOptions definieren wir die Zoomstufe der Karte (zoom), den Mittelpunkt der Karte (center) und den Karten-Typ (mapTypeId).
  • Zeile 23
    In dieser Zeile laden wir schließlich die Google Maps Karte in den Container mit der ID pos und übergeben die eben definierten Einstellungen aus dem myOptions-Objekt. Anschließend speichern wir das Ergebnis zur Weiterverarbeitung in der Variable map.
  • Zeile 25-30
    Zwar haben wir die Karte bereits auf unsere Position zentriert, aber da wir es genau wissen möchten, benötigen wir noch ein Symbol, welches uns die exakte Position auf der Karte anzeigen soll. Für solche Markierungen stellt die Google Maps API die Marker()-Funktion zur Verfügung. Diese erwartet als Parameter ein Objekt. In unserem Beispiel definieren wir erneut über unsere latlng-Variable die Position der Markierung (position), die Karte auf die der Marker überhaupt gesetzt werden soll (map) und den Titel (title), welcher beim Überfahren des Symbols mit der Maus angezeigt wird.

Das war bereits alles. Nach Bestimmung der Position (kann je nach Browser und Art der Positionsermittlung einige Sekunden dauern) sollte eine Google Maps Karte angezeigt werden, die in etwa wie die folgende aussieht:

Ergebnis im Desktop-Browser Chrome

Zur Information: Ich sitze gerade nicht in Löhne sondern Espelkamp. Im Desktop-Browser findet wie am Anfang des Artikels besprochen höchstwahrscheinlich eine Ermittlung der Position an Hand der IP-Adresse statt. Das Ergebnis weißt also eine Ungenauigkeit von ca. 15 – 20 Kilometern auf. Jedoch kann bereits in wenigen Stunden wieder eine andere Position ermittelt worden sein; in meinen Tests variierte die Differenz zwischen 1 – 50 Kilometern.

Wenn ich das HTML5-Dokument mit meinem Smartphone aufrufe und die Freigabe zur Positionsermittlung erteile, erhalte ich natürlich ein Ergebnis, welches bis auf wenige Meter exakt meine Position bestimmt. In diese Fall berücksichtigt der Browser meines Android-Smartphones nicht die IP-Adresse, sondern greift direkt auf den GPS-Sender zu.

Einsatzgebiete? Wo fange ich an…

Ich persönlich finde die HTML5 Geolocation API großartig und freue mich immer, wenn ich Sie in Kundenprojekten optional verwenden darf. Mit korrekter Fallback-Implementierung sind die Einsatzgebiete nämlich schier unendlich!

Vielleicht konnte ich euch mit diesem Artikel ja auf die ein oder andere Idee bringen – falls dies so ist und ihr nicht die nächste One-Million-Dollar-Page plant, würde ich mich freuen von euch zu hören, wo ihr euch einen Einsatz der Geolocation API vorstellen könntet :)

Wer übrigens noch tiefer in das Thema HTML5 Geolocation API einsteigen möchte, dem kann ich nur das Buch beziehungsweise die DVD von HTML5-Erklärbär Peter Kröner empfehlen. Dort geht er in einem gesonderten Artikel genau auf dieses Thema ein. Aber auch ansonsten werden eigentlich alle relevanten Bereiche der neuen Webtechnologie ausführlich behandelt.

Dieser Artikel wurde am 11.01.2012 veröffentlicht

Wer schreibt hier?

Torben Leuschner - Webentwickler

Hi, ich bin Torben und baue leidenschaftlich gerne Webseiten. Also habe ich mein Hobby zum Beruf gemacht und bin seit 2008 als Webentwickler Selbständig tätig. Obwohl ich schwerpunktmäßig für Kunden arbeite habe ich auch sehr viel Freude an der Realisierung eigener Projekte. Daraus resultierend hat sich eine große Affinität zu den Themen Online Marketing und Suchmaschinenoptimierung entwickelt. Regelmäßig schreibe ich auf Twitter, noch aktiver bin ich allerdings auf Google+.

Wie stehst du dazu?

  1. Hi Torben,

    ich finde die Funktion sehr spannend. Durch meinen Tätigkeit als Aussendienst im Holzhandel versuche ich meine Tätigkeit, Kontakte und Besuche täglich zu dokumentieren und meine Besuchten Orte zu notieren. Dazu benutze ich Google Forms und Docs, dabei wäre eine automatische Übernahme meiner momentanen Position in mein Besuchsformular natürlich genial. Falls Du dazu noch Infos oder Tips hättest, würde ich mich über eine Antwort freuen. Danke
    Und gute N8

  2. Ich finde es gut, dass Google den deutschen Datenschutz ernst nimmt. Leider gibt es eine Möglichkeit, um zu mogeln. Man müsste den alten Code von Google mit der API benutzen und vorher die IP-Adresse in eine Adresse auflösen. Diese Variante ist aber nicht so genau, wie die hier beschriebene.

  3. Wirklich beeindruckend! Könnte man anstatt LatLng auch einfach das Land und die Region auslesen, um die dann weiter zu verarbeiten, also bspw. Germany, Hessen oder Spain, Canarias!?

    Das wäre genau das, was ich gerade brauchen könnte. Hast Du da irgendwelche Tipps?

    • Hallo Volker,

      die Geolocation Javascript API liefert erstmal nur Längen- und Breitengrad zurück. Im Netz existieren aber einige Datenbank, die an Hand der Koordinaten das Land oder sogar die Stadt bestimmen können.

      Schau dir doch mal OpenGeoDb an :)

      Viele Grüße,
      Torben

  4. Wenn ich die Datei auf mein S3 lade und diese mit HTML Viewer öffne steht da nur “Deine Position wird ermittelt”. Normalerweiße müsste ja dann jetzt das GPS Modul anspringen. Nur das macht es nicht :-/ , wobei ich dies eigendlich freigegeben hab.

  5. Hallo Torben,

    geht diese Geolocation auch, wenn der GPS Sender sich nicht im selben Gerät befindet in dem es in Google Maps angezeigt werden soll? In meinem Fall würde ich gerne über TCP/IP auf den GPS Sender zugreifen, die GPS Daten auslesen und auf einer Webseite (aufrufbar von jedem PC) anzeigen lassen.

    MfG, Thomas

    • Hallo Thomas,

      bei HTML5 und deren APIs handelt es sich grundlegend um clientseitige Technologie. Was du benötigst ist eine Datenbank, in der die Koordinaten des GPS Gerätes eingespeichert und wieder ausgelesen werden können.

      Es wäre dennoch möglich auf die HTML5 Geolocation API zurückzugreifen, in dem du beispielsweise am Gerät ein Browserfenster geöffnet hältst, welches regelmäßig einen AJAX-Request mit den Positionsdaten an den Server sendet.

      Viele Grüße,
      Torben

  6. hi,

    wäre es auch irgendwie machbar dem user nichts anzuzeigen und das ganze automatisch an ein php script zu übergeben z.b geo.php?lat=XXXXX&long=YYYY

    Möchte dies in einen Ajach chat integrieren und komme einfach nicht dahinter ;(((

    • Hallo @meXX,

      ich spekuliere zwar nur, denke aber, dass dies nicht möglich sein wird, da ja der Browser diese Angelegenheit regelt. Es ließe sich aber sehr einfach mit bspw. ip2nation realisieren. Dort werden die Geo-Daten quasi unbemerkt vom User im Hintergrund ausgelesen und können per PHP easy weiterverarbeitet werden. Kostenlose Angebote gibts im Netz, die zumindest auf die Region (Bundesland bspw.) ordentlich arbeiten. Beim Ort können sie allerdings schon mal heftig daneben liegen – sofern man die Gratisangebote nutzt. Bezahlversionen sollen da mehr können.

  7. Hallo,

    danke das bringt mir nur leider “Pustekuchen” denn ich möchte nicht die Stadt oder PLZ des Users auslesen sondern die geocords :) sind ca. bis auf ein paar m laut android handy :)

    :(((

  8. Hey… erstmal ein Lob, super Seite!!!

    Habe gleich mal die von dir beschriebene Geolocation ausprobiert und hat auch gleich bei mir funktioniert… :-)

    Wäre es möglich verschiedene Events, die in der Nähe sind (aktuelle Position), zusätzlich anzeigen zu lassen.

    • Guten Abend,

      das wäre problemlos möglich, wenn du die Informationen über die Position des Benutzers an den Server sendest.

      Dazu kannst Du dir den Kommentar direkt über deinem anschauen. Dort habe ich zwei Links hinterlegt, die Informationen beinhalten, wie du das realisieren kannst.

      Eventuell schreibe ich zu dem Thema auch bald mal einen Beitrag, wenn daran soviel Interesse besteht :)

      Viele Grüße,
      Torben

  9. Hallo Torben,
    ich habe eine blöde Frage: Ich habe meine website mit einem “homepage-baukasten” erstellt da ich keine Ahnung von html habe. Das Einzige was ich geschafft habe, ist den link aus google maps in die website hinein zukopieren.
    Geht das so auch mit den 39 Zeilen html 5 dokument? Ich möchte meinen Standort aus meinem smartphone (sobald ich den latitude-standort freigegeben habe) in meiner website anzeigen lassen. Vielleicht sollte ich es einfach mal probieren.

    • Hallo Bernd,

      mit einem Homepagebaukasten dürfte dies schwierig werden, da Du hier schon im Bereich Javascript und Programmierung bist.

      Möchtest Du deinen Standort anderen Benutzern mitteilen oder nur den des aktuellen Besuchers auf der Website ausgeben?

      Viele Grüße,
      Torben

  10. Hallo Torben,
    danke für die gute Einführung zur HTML Geolocation API.
    Ich würde gerne die ermittelten lat/long Daten des Client mit einem Fixpunkt zum Beispiel meinem (statischen) Standpunkt verrechnen und nur die Distanz in Metern ausgeben.
    Kannst du mir auf die Sprünge helfen wie dies aussehen müsste?

    Beste Grüße,
    Daniel

  11. Ich besitze ein Notebook, mit dem ich über mein WLAN aufs Internet zugreife. Mein Standort wird bis auf 0-10 Meter (!) genau angezeigt. Das habe ich schon auch anderswo gemerkt. Kann es sein, dass der API viel genauer ist als oben angegeben? Ich habe weder 3G-/ LTE- noch GPS-Modul.

  12. Ich implementiere gerade eine Webapp für mobile devices hauptsächlich.
    Dabei möchte ich ach eine Geolocation einbauen.

    Nun funktioniert es auf meinem Desktpbrowser perfekt jedoch auf meinem Android Emulator (4.0 Android ) kann er den Ort nicht ermitteln.

    “Deine Position kann nicht ermittelt werden”

    Leider hab ich die Möglichkeit nicht den Sachverhalt an einem richtigen Smartphone zu testen.

    Was gäbe es den für gründe für ein solches Fehlverhalten.

    • Hi Marcus,

      da bin ich ehrlich gesagt überfragt. Solange die Funktionsweise auf deinem Desktop korrekt ist, sollte die Implementierung ja auch funktionieren.

      Welche Eigenarten oder Tücken ein Emulator hier aufweist, kann ich leider mangels Erfahrung nicht sagen.

      Ich kann Dir nur empfehlen, von irgendwo ein Testgerät aufzutreiben. Ein Emulator kann Dir hier leider sowieso nicht das komplette Debugging abnehmen..

      Viele Grüße,
      Torben

  13. Entschuldigung kleiner nachtrag:

    Einstellung bezüglich erlaubnis für zugirffspubnkt etc sind alle korrekt.
    Google hat vollen zugriff auf die Local. fkt.

  14. Hallo Torben,

    vorweg, ich kennen mich nicht besonders mit Javascript aus :-(

    Ich möchte auf einer Google Map eine Route anzeigen lassen. Der Startpunkt soll die Geolocation sein und der Endpunkt in ein input-Feld eingetragen werden. Drückt der User ein Button wird die Route angezeigt.

    Was ich schon habe: Beim Aufruf der Seite wird die Geolocation angezeigt aber für die Route muß der Start- UND der Endpunkt in ein input-Feld eingegeben werden.

    var directionDisplay;
    var directionsService = new google.maps.DirectionsService();
    var map;

    function initialize() {
    directionsDisplay = new google.maps.DirectionsRenderer();
    var mapOptions = {
    zoom: 10,
    mapTypeId: google.maps.MapTypeId.ROADMAP
    };
    map = new google.maps.Map(document.getElementById(‘map-container’), mapOptions);
    directionsDisplay.setMap(map);

    if(navigator.geolocation) {
    navigator.geolocation.getCurrentPosition(function(position) {
    var pos = new google.maps.LatLng(position.coords.latitude,
    position.coords.longitude);

    var marker = new google.maps.Marker({
    map: map,
    position: pos,
    title: “Hier bist du :)”
    });

    map.setCenter(pos);
    }, function() {
    handleNoGeolocation(true);
    });
    } else {
    // Browser doesn’t support Geolocation
    handleNoGeolocation(false);
    }
    }

    function handleNoGeolocation(errorFlag) {
    if (errorFlag) {
    var content = ‘Error: Deine Position konnte nicht ermittelt werden.’;
    } else {
    var content = ‘Error: Dein Gerät unterstützt nicht den Ortungsservice.’;
    }

    var options = {
    map: map,
    position: new google.maps.LatLng(60, 105),
    content: content
    };

    var infowindow = new google.maps.InfoWindow(options);
    map.setCenter(options.position);
    }

    function calcRoute() {
    var start = document.getElementById(‘start’).value;
    var end = document.getElementById(‘end’).value;
    var request = {
    origin:start,
    destination:end,
    travelMode: google.maps.DirectionsTravelMode.DRIVING
    };
    directionsService.route(request, function(response, status) {
    if (status == google.maps.DirectionsStatus.OK) {
    directionsDisplay.setDirections(response);
    }
    });
    }

    google.maps.event.addDomListener(window, ‘load’, initialize);

    HTML:

    Gruß Alex

  15. Hallo Torben,
    zunächst mal vielen Dank für das gute und sehr ausführliche Tutorial. Eine Frage in diesem Zusammenhang: Wird die angezeigte (eigene) Position auf der Map laufend aktualisiert? Ich vermute nicht, bin aber zugegebenermaßen kein Profi. Wie könnte so etwas umsetzbar sein? Ich bin schon auf diese (etwas ältere) Lösung gestoßen, die funktioniert aber leider nicht. Hast du einen (für Laien nachvollziehbaren ;-) Tipp?

  16. Moin Thorben,
    Du hast anscheinend schon viele Erfahrungen mit der Geo API gesammelt.
    Ich finde diese auch interessant, habe allerdings das Problem, dass die Standortbestimmung mit Fehlercode 2, also die aktuelle Position konnte nicht bestimmt werden, endet. Ich habe dies getestet mit Laptop über LTE (Vodafone) und mit Smartphone über EDGE/ UMTS (Telekom), in beiden Fällen derselbe Fehler.
    Bevor ich auf Deine Seite gestoßen bin, habe ich den Code schon einmal in einem Forum gepostet, der Supporter dort hat diesen getestet und das mit Erfolg!
    Hast Du eine Idee, benötigt man vielleicht eine Erlaubnis vom Netzbetreiber?
    Gruß Tom

    • Hi Tom,

      das hat mit dem Netzwerkbetreiber nichts zu tun. Mit welchem Browser hast du denn getestet? Erschien eine Abfrage, ob die Website deinen Standort nutzen darf. Hast Du diese bestätigt?

  17. Moin Torben,
    ich bin leider noch nicht soweit, mit der Geo-API eine Anwendung zu erstellen, bei mir scheitert die Sache gleich bei ersten grundlegenden Tests. Ich bekomme nach Abgabe meiner Zustimmung zur Standortbestimmung den Fehler 2 (aktuelle Position konnte nicht bestimmt werden), und das auf zwei verschiedenen Geräten (Laptop mit IE9 über LTE, Handy mit Android 4. … über Telekom EDGE bzw. UMTS).
    Ich habe meinen Code bereits einmal in einem Forum gepostet, der Supporter dort hat diesen getestet, mit Erfolg.
    Da auf zwei verschiedenen Geräten dasselbe Ergebnis kommt, schließe ich eigentlich aus, dass die Ursache bei meinen Browsern bzw. Betriebssystemen liegt. Der Supporter meinte, mein Netz wäre nicht in Ordnung (mobil telefonieren ist allerdings möglich).
    Hast Du vielleicht eine Idee, was die Ursache sein könnte? Muss man sich vielleicht registrieren lassen bei den Netzbetreibern?
    Gruß Tom

    • Hallo Tom,

      sorry für die verspätete Rückmeldung, dein Kommentar war irgendwie untergegangen :(

      Dein Mobilfunk-Netz hat so gut wie gar nichts mit der Funktionalität der Geolocation API im Browser zu tun. Ist eine Mobilfunk-Verbindung vorhanden, wird unter Umständen auf diese zurückgegriffen, um ein genaueres Ergebnis zu erzielen. Falls nicht vorhanden, wählt der Browser eine Alternative.

      Les Dir dazu doch oben auch den Abschnitt “Wie funktioniert die Geolocation API?” durch :)

      Aus der Ferne kann ich nur schwerlich eine Diagnose abgeben. Hast du ausgeschlossen, dass etwaige Javascript-Fehler die Ausführung behindern? Wie schaut es mit anderen Browsern aus? Chrome oder Firefox zum Beispiel?

      • Moin Torben, das Problem hat sich soweit erledigt, es lag daran, dass ich nach Erhalt des Handys vorsichtshalber alles , was auszuschalten war, ausgeschalten habe. Allerdings ist die Genauigkeit eine Katatstrophe, 3000 m Radius.
        GPS soll ja auch eine Info-Quelle für die API sein, mein Handy hat auch GPS. Nur wenn ich zuschalte, verbessert sich der Wert keineswegs. Hast Du dazu vielleicht noch einen Tip?
        Gruß Tom

  18. Lieber Torben
    Dieser Beitrag hat mir gerade ein ganzes Stück weitergeholfen, danke!
    Ist es auch möglich, in einem zweiten div-Container ein Foto erscheinen zu lassen, wenn eine Person zu einer bestimmten Koordinate kommt und dieses wieder verschwinden zu lassen, wenn sie sich wieder entfernt?

    Grüsse, Ilona

    • Hallo Ilona,

      schön dass Dir der Beitrag weitergeholfen hat :)

      Dein Szenario ließe ich mit Hilfe der Geolocation API sicher umsetzen. Allerdings brauchst du dann quasi eine Client- sowie eine Serveranwendung.

      Der Client müsste in regelmäßigen Intervallen die Position des Nutzers abfragen und per AJAX-Request an den Server senden. Auf dem Server müssten die Eingaben eingehen und in einer DB gespeichert werden.

      Dementsprechend ist dein Vorhaben schon etwas umfangreicher ;-)

  19. Moin Torben
    Erstmals vielen dank für dein Hilfsreiches Tutorial…
    Aber ich möchte gerne wissen ob es eine möglichkeit gibt mehrere Client´s, auf einer karte anzeigen zu lassen…
    Da ich eine webapp basteln möchte und sowas wie Latitute mit einbauen möchte,nur ohne externe anwendungen (zb latitude auf dem handy installiert sein muss)…
    also im großen und ganzen sollte es so sein,das ich und freunde zb auf der webapp die karte sehen und sehen,wo sich der andere befindet…
    hoffe du hast da eventuell eine lösung für mich…

  20. Moin Torben,
    diese API hat mich schon einige Nerven gekostet. Ich hatte vor längerem auch schon einmal hier gepostet, damals lag es einfach an der fehlenden Freigabe in den Einstellungen des Browsers, darauf soll man erstmal kommen, wo überall sich Schalter befinden. Mittlerweile läuft das aber ganz gut, eine Sache nervt mich dennoch.
    Ich nutze die API, um erstens Standorte festzuhalten, deren Koordinaten in einer Datenbank abzuspeichern und zweitens um diese Standorte zu einem späteren Zeitpunkt wiederzufinden. Zu letzterem lasse ich mir eine Tabelle ausgeben, die gespeicherten Koordinaten sind als Parameter für ein OnClick-Ereignis übergeben. Durch Klick auf eine Zeile wird der Standort der Maps-Static-API übergeben, im Ergebnis habe ich einen Kartenausschnitt der Tabelle überlagert angezeigt mit dem Standort im Zentrum.
    Um nun einen Standort, z. B. im Wald wiederfinden zu können, kann ich von der Karte aus die Geolocation-API aufrufen, um den aktuellen Standort zu ermitteln und um die Karte zu aktualisieren mit Anzeige des gespeicherten und des aktuellen Standortes. Das funktioniert, solange ich keine Dauergenehmigung für die Übermittlung des Standortes erteile. Ich muss also bei jedem Aufruf der Seite und Aufruf der API die Erlaubnis neu erteilen und muss darauf achten, dass ich diese nicht vorher erteile, als das Fixing des GPS-Empfängers beendet ist. Gebe ich die Erlaubnis früher, fragt die API die Standortquellen sofort ab. Und da das GPS-Gerät in der Fixing-Phase aber noch nicht aussagefähig ist, werden eben dann nur die anderen Quellen herangezogen. Unverständlich und ärgerlich, aber da wohl softwareseitig so festgelegt, anscheinend nicht zu ändern oder?
    Damit könnte ich ja noch umgehen, aber angenommen ich suche einen Standort, checke die aktuelle Position und lasse mir beide Punkte anzeigen, bewege mich dann anhand der Karte in die entsprechende Richtung und möchte dann noch einmal meinen aktuellen Standort mit dem gespeicherten vergleichen, starte deshalb erneut die Geol-API, erhalte ich sofort, die Zustimmung wurde ja bereits erteilt, ein Ergebnis, nur eben nicht vom GPS-Gerät. Weil wieder wie oben schon beschrieben die Abfrage der Datenquellen erfolgte, bevor das GPS-Gerät bereit war. So muss ich also die komplette Datenbankabfrage wiederholen, die Webseite mit der Tabelle neu laden und die Karte neu anfordern, um wieder an ein GPS-Ergebnis zu kommen, um endlich meinen aktuellen Standort mit dem gesuchten auf der Karte abgebildet zu bekommen.
    Ist Dir das so noch nicht passiert? Hast Du dafür einen Tip zur Abhilfe?
    Ich wundere mich ernsthaft, dass andere damit kein Problem haben!
    Wenn Du möchtest, kannst Du dieses einmal nachvollziehen mit obiger Webseite. Diese lädt keine Karte, sondern schreibt die Werte in Textfelder, wenn man zuvor auf das GPS-Symbol oben links geklickt hat. Ich erhalte regelmäßig Genauigkeitswerte um 5-20 m (Textfeld 3), wie sie sie für GPS typisch sind, beim ersten Aufruf der API nach dem Laden der Seite. Bei weiteren Aufrufen der API kommen dann Genauigkeitswerte um 3000 m, also typisch für Mobilfunknetze, zustande (WLAN am besten mal auslassen).

    Gruß Tom

  21. Hi Torben,
    klasse TUT hat mir wirklich geholfen nur sitz ich nun noch an einem Problem würde gerne eine KML Datei einbinden. Weisst du wie man das am besten machen kann?

    Gruß

  22. Hallo erstmal

    ein sehr gute Tutorial. Leider kommt es bei mir nicht so schön aus, wie bei dir.
    Bei mir wird es nicht richtig angezeit also damit man versteht was ich meine ist hier ein link: http://www.essentialwebconcepts.com/blog/wp-content/uploads/2011/03/mapglitch.jpg.
    Ich konnte dieses Problem nicht lösen, auch mit dieser Anleitung nicht. Wie sollte ich vorgehen um dies zu beseitigen oder hast du bereits eine Lösung für dieses Problem?

    Mit Freundliche Grüsse
    Luca Campisi

  23. Hallo Torben,
    sehr coole Sache hier. Nur eine frage hab ich bei dieser Funktion hier. Bekomme ich probleme mit google wenn ich deinen Quelltext genau so auf meine Homepage implementier??

    Oder verletzt ich hierbei keine Urheberrechte???

    Schonmal danke für die Rückmeldung.

    MFG

Hinterlasse eine Antwort

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind markiert *

Du kannst folgende HTML-Tags benutzen: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

eMail-Benachrichtigung bei weiteren Kommentaren.
Auch möglich: Abo ohne Kommentar.