path: root/files/de/web/api/geolocation_api/index.html

---
title: Verwenden von geolocation
slug: Web/API/Geolocation_API
translation_of: Web/API/Geolocation_API
original_slug: Web/WebAPI/verwenden_von_geolocation
---
<p>Die <strong>"geolocation"-API</strong> ermöglicht es Nutzern, einer Web-Applikation die eigene Position mitzuteilen. Um die Privatsphäre des Nutzers zu schützen, wird dieser vorher um Erlaubnis gebeten und muss der Übermittlung zustimmen.</p>

<h2 id="Das_geolocation-Objekt">Das geolocation-Objekt</h2>

<p>Die geolocation-API wird durch das {{domxref("window.navigator.geolocation","navigator.geolocation")}}-Objekt offengelegt.</p>

<p>Wenn das Objekt existiert, sind die geolocation-Services vorhanden und nutzbar. Sie können die Funktionstüchtigkeit daher wie folgt testen:</p>

<pre class="brush: js">if ("geolocation" in navigator) {
  /* geolocation funktioniert */
} else {
  /* geolocation funktioniert NICHT */
}
</pre>

<div class="note">
<p><strong>Notiz:</strong> In Firefox 24 und älteren Versionen hat <code>"geolocation" in navigator</code> immer true zurückgegeben, auch wenn die API ausgeschaltet war. Dies wurde mit <a href="/en-US/docs/Mozilla/Firefox/Releases/25/Site_Compatibility">Firefox 25</a> gelöst um mit dem Standard kompatibel zu sein. ({{ bug(884921) }})</p>
</div>

<h3 id="Die_derzeitige_Position_abfragen">Die derzeitige Position abfragen</h3>

<p>Um die derzeitige Position des Nutzers zu erhalten, können Sie die Methode {{domxref("window.navigator.geolocation.getCurrentPosition()","getCurrentPosition()")}} aufrufen. Dies startet eine asynchrone Anfrage für den Abruf der Position zu initiieren. Wenn die Position erhalten wurde, wird die übergebene Callback-Funktion ausgeführt. Sie können optional auch eine zweite Callback-Funktion übergeben, welche im Falle eines Fehlers ausgeführt wird. Ein dritter, optionaler Parameter ist ein Konfigurationsobjekt, in dem Sie das maximale Alter der zurückgegeben Position, die maximale Wartezeit für die Anfrage und den Wunsch für eine hohe Genauigkeit festlegegen können.</p>

<div class="note">
<p><strong>Notiz:</strong> Standardmäßig versucht {{domxref("window.navigator.geolocation.getCurrentPosition()","getCurrentPosition()")}} so schnell wie möglich mit einer geringen Genauigkeit zu antworten. Es ist nützlich wenn Sie eine schnelle Antwort benötigen, unabhängig von der Genauigkeit. Beispielsweise Geräte mit einem GPS können eine Minute oder länger benötigen um eine neue Position zu erhalten, also kann es möglich sein, dass weniger genaue Daten (Ort der IP oder von WLANs) zurückgegeben werden.</p>
</div>

<pre class="brush: js">navigator.geolocation.getCurrentPosition(function(position) {
  do_something(position.coords.latitude, position.coords.longitude);
});</pre>

<p>Das obige Beispiel wird die Funktion <code>do_something()</code> ausführen, wenn eine Position erhalten wurde.</p>

<h3 id="Die_derzeitige_Position_überwachen">Die derzeitige Position überwachen</h3>

<p>Wenn sich die Positionsdaten ändern (entweder über die Bewegung des Gerätes oder den Erhalt genauere Geolokationsdaten), können Sie eine Callback-Funktion erstellen, die mit der erneuerten Positionsinformation arbeitet. Dies ist über die Funktion {{domxref("window.navigator.geolocation.watchPosition()","watchPosition()")}} möglich, welche die gleichen Eingabeparameter wie {{domxref("window.navigator.geolocation.getCurrentPosition()","getCurrentPosition()")}}. besitzt. Die Callback-Funktion wird mehrere Male ausgeführt, dies erlaubt dem Browser die Position aufgrund von Bewegungen oder genaueren Positionsdaten, durch das Verwenden von anderen (langsameren) Methoden, zu erneuern. Die Fehler-Callback-Funktion, welche wie auch in {{domxref("window.navigator.geolocation.getCurrentPosition()","getCurrentPosition()")}},  hier optional ist, kann auch mehrfach aufgerufen werden.</p>

<div class="note">
<p><strong>Notiz:</strong> Sie können  {{domxref("window.navigator.geolocation.watchPosition()","watchPosition()")}} auch ohne ein vorangestellten Aufruf von {{domxref("window.navigator.geolocation.getCurrentPosition()","getCurrentPosition()")}} nutzen.</p>
</div>

<pre class="brush: js">var watchID = navigator.geolocation.watchPosition(function(position) {
  do_something(position.coords.latitude, position.coords.longitude);
});</pre>

<p>Die Methode {{domxref("window.navigator.geolocation.watchPosition()","watchPosition()")}} gibt eine numerische ID zurück, die für die eindeutige Identifikation des Positionsüberwachers verwendet werden kann; diese können Sie in der Methode {{domxref("window.navigator.geolocation.clearWatch()","clearWatch()")}} nutzen, um die Positionsüberwachung zu beenden.</p>

<pre class="brush: js">navigator.geolocation.clearWatch(watchID);
</pre>

<h3 id="Anpassen_der_Antwort">Anpassen der Antwort</h3>

<p>Sowohl {{domxref("window.navigator.geolocation.getCurrentPosition()","getCurrentPosition()")}} als auch {{domxref("window.navigator.geolocation.watchPosition()","watchPosition()")}} nehmen einen Erfolgs-Callback an, einen optionalen Fehler-Callback und ein optionales <code>PositionOptions</code>-Objekt.</p>

<p>{{page("/en-US/docs/DOM/window.navigator.geolocation.getCurrentPosition","PositionOptions")}}</p>

<p>Ein Aufruf von {{domxref("window.navigator.geolocation.watchPosition()","watchPosition")}} könnte wie folgt aussehen:</p>

<pre class="brush: js">function geo_success(position) {
  do_something(position.coords.latitude, position.coords.longitude);
}

function geo_error() {
  alert("Entschuldigung, keine Positionsinformationen sind verfügbar.");
}

var geo_options = {
  enableHighAccuracy: true,
  maximumAge        : 30000,
  timeout           : 27000
};

var wpid = navigator.geolocation.watchPosition(geo_success, geo_error, geo_options);</pre>

<p><a id="fck_paste_padding">Ein (englisches) Beispiel von watchPosition in Aktion: </a><a class="external" href="http://www.thedotproduct.org/experiments/geo/">http://www.thedotproduct.org/experiments/geo/</a><br>
 <a id="fck_paste_padding"></a></p>

<h2 id="Darstellung_einer_Position">Darstellung einer Position</h2>

<p>Die Position des Nutzers wird durch ein <code>Position</code>-Objekt dargestellt, welches ein <code>Coordinates</code>-Objekt referenziert.</p>

<p>{{page("/en-US/docs/DOM/window.navigator.geolocation.getCurrentPosition","Position")}}</p>

<p>{{page("/en-US/docs/DOM/window.navigator.geolocation.getCurrentPosition","Coordinates")}}</p>

<h2 id="Fehlerbehandlung">Fehlerbehandlung</h2>

<p>Die Fehler-Callback-Funktion, wenn im Aufruf von <code>getCurrentPosition()</code> oder <code>watchPosition()</code> vorhanden, nimmt ein PositionError-Objekt als ersten Parameter an.</p>

<pre class="brush: js">function errorCallback(error) {
  alert('ERROR(' + error.code + '): ' + error.message);
};
</pre>

<p>{{page("/en-US/docs/DOM/window.navigator.geolocation.getCurrentPosition","PositionError")}}</p>

<h2 id="Geolokations-Live-Beispiel">Geolokations-Live-Beispiel</h2>

<div class="hidden">
<pre class="brush: css">body {
  padding: 20px;
  background-color:#ffffc9
}

p { margin : 0; }
</pre>
</div>

<h3 id="HTML_Content">HTML Content</h3>

<pre class="brush: html;">&lt;p&gt;&lt;button onclick="geoFindMe()"&gt;Zeige meine Position an&lt;/button&gt;&lt;/p&gt;
&lt;div id="out"&gt;&lt;/div&gt;
</pre>

<h3 id="JavaScript_Content">JavaScript Content</h3>

<pre class="brush: js;">function geoFindMe() {
  var output = document.getElementById("out");

  if (!navigator.geolocation){
    output.innerHTML = "&lt;p&gt;Geolokation wird von ihrem Browser nicht unterstützt&lt;/p&gt;";
    return;
  }

  function success(position) {
    var latitude  = position.coords.latitude;
    var longitude = position.coords.longitude;

    output.innerHTML = '&lt;p&gt;Die Latitude ist ' + latitude + '° &lt;br&gt;Die Longitude ist ' + longitude + '°&lt;/p&gt;';

    var img = new Image();
    img.src = "http://maps.googleapis.com/maps/api/staticmap?center=" + latitude + "," + longitude + "&amp;zoom=13&amp;size=300x300&amp;sensor=false";

    output.appendChild(img);
  };

  function error() {
    output.innerHTML = "Es war nicht möglich Sie zu lokalisieren";
  };

  output.innerHTML = "&lt;p&gt;Lokalisieren…&lt;/p&gt;";

  navigator.geolocation.getCurrentPosition(success, error);
}
</pre>

<h3 id="Demo">Demo:</h3>

<p>{{ EmbedLiveSample('Geolokations-Live-Beispiel',350,410) }}</p>

<h2 id="Für_die_Erlaubnis_fragen">Für die Erlaubnis fragen</h2>

<p>Jedes Add-On von addons.mozilla.org, welches dieses Feature nutzt, muss explizit, ähnlich der automatischen Frage von Websites, nach Erlaubnis fragen. Die Antwort des Nutzers wird in einer Konfiguration gespeichert, welche von <code>pref</code>-Parameter bestimmt wird, wenn möglich. Die Funktion, die als <code>callback</code>-Parameter verwendet wird mit einem boolischen Wert aufgerufen, welcher die Antwort des Nutzers anzeigt. Wenn dieser <code>true</code> ist, kann das Add-On Geolokationsdaten nutzen.</p>

<pre class="brush: js">function prompt(window, pref, message, callback) {
    let branch = Components.classes["@mozilla.org/preferences-service;1"]
                           .getService(Components.interfaces.nsIPrefBranch);

    if (branch.getPrefType(pref) === branch.PREF_STRING) {
        switch (branch.getCharPref(pref)) {
        case "always":
            return callback(true);
        case "never":
            return callback(false);
        }
    }

    let done = false;

    function remember(value, result) {
        return function() {
            done = true;
            branch.setCharPref(pref, value);
            callback(result);
        }
    }

    let self = window.PopupNotifications.show(
        window.gBrowser.selectedBrowser,
        "geolocation",
        message,
        "geo-notification-icon",
        {
            label: "Ort teilen",
            accessKey: "S",
            callback: function(notification) {
                done = true;
                callback(true);
            }
        }, [
            {
                label: "Immer teilen",
                accessKey: "A",
                callback: remember("always", true)
            },
            {
                label: "Niemals teilen",
                accessKey: "N",
                callback: remember("never", false)
            }
        ], {
            eventCallback: function(event) {
                if (event === "dismissed") {
                    if (!done) callback(false);
                    done = true;
                    window.PopupNotifications.remove(self);
                }
            },
            persistWhileVisible: true
        });
}

prompt(window,
       "extensions.foo-addon.allowGeolocation",
       "Foo Add-on möchte deinen Ort abrufen.",
       function callback(allowed) { alert(allowed); });
</pre>

<h2 id="Browser_compatibility">Browser compatibility</h2>

<div>{{ CompatibilityTable() }}</div>

<div> </div>

<div id="compat-desktop">
<table class="compat-table">
 <tbody>
  <tr>
   <th>Feature</th>
   <th>Chrome</th>
   <th>Firefox (Gecko)</th>
   <th>Internet Explorer</th>
   <th>Opera</th>
   <th>Safari</th>
  </tr>
  <tr>
   <td>Grundsätzlicher Support</td>
   <td>5</td>
   <td>{{CompatGeckoDesktop("1.9.1")}}</td>
   <td>9</td>
   <td>10.60<br>
    Removed in 15.0<br>
    Reintroduced in 16.0</td>
   <td>5</td>
  </tr>
 </tbody>
</table>
</div>

<div id="compat-mobile">
<table class="compat-table">
 <tbody>
  <tr>
   <th>Feature</th>
   <th>Android</th>
   <th>Chrome for Android</th>
   <th>Firefox Mobile (Gecko)</th>
   <th>IE Mobile</th>
   <th>Opera Mobile</th>
   <th>Safari Mobile</th>
  </tr>
  <tr>
   <td>Grundsätzlicher Support</td>
   <td>2.1</td>
   <td>11</td>
   <td>{{CompatGeckoMobile("4")}}</td>
   <td>10</td>
   <td>10.60</td>
   <td>3.2</td>
  </tr>
 </tbody>
</table>
</div>

<h3 id="Gecko-Notizen">Gecko-Notizen</h3>

<p>Firefox besitzt Support für das Lokalisieren über WLAN-Informationen durch die "Google Location"-Services. In einer Transaktion zwischen Firefox und Google werden die Daten übetragen, inklusive Daten des WLAN-Zugriffspunktes, einem Zugriffstoken (ähnlich wie ein zweiwöchiger Cookie), und der IP-Adresse des Nutzers. Für mehr Informationen sollten Sie <a href="http://www.mozilla.com/de/privacy/">Mozillas</a> und <a href="www.google.com/privacy/lsf.html">Googles</a> Datenschutzbestimmungen lesen, welche den Rahmen der Datennutzung angeben.</p>

<h2 id="Siehe_auch">Siehe auch</h2>

<ul>
 <li>{{domxref("window.navigator.geolocation","navigator.geolocation")}}</li>
 <li><a href="http://www.w3.org/TR/geolocation-API/" rel="external" title="http://www.w3.org/TR/geolocation-API/">Geolocation API auf w3.org</a></li>
 <li><a href="/en-US/demos/tag/tech:geolocation" title="en-US/demos/tag/tech:geolocation/">Demos für die Geolokations-API</a></li>
 <li><a href="https://hacks.mozilla.org/2013/10/who-moved-my-geolocation/">Who moved my geolocation?</a> (Hacks blog)</li>
</ul>