Es kann losgehen!

Bevor Sie mit der Entwicklung beginnen, lesen Sie bitte unsere Entwicklerdokumentation.

Die Google Maps JavaScript API aktivieren

Zum Einstieg führen wir Sie durch die Google Developers Console, wo Sie vorab Folgendes tun müssen:

  1. Ein Projekt erstellen oder auswählen
  2. Die Google Maps JavaScript API und zugehörige Dienste aktivieren
  3. Zugehörige Schlüssel erstellen
Weiter

Standortbestimmung: Anzeigen von Nutzer- oder Gerätepositionen auf Karten

Übersicht

In dieser Anleitung erfahren Sie, wie Sie den geografischen Standort eines Nutzers oder eines Geräts mithilfe der Standortbestimmungsfunktion der Google Maps JavaScript API auf einer Google-Karte anzeigen.

Unten sehen Sie eine Karte, auf der Ihr aktueller Standort ermittelt werden kann.

Im folgenden Beispiel wird der gesamte Code angezeigt, den Sie zum Erstellen dieser Karte benötigen.

// Note: This example requires that you consent to location sharing when
// prompted by your browser. If you see the error "The Geolocation service
// failed.", it means you probably did not give permission for the browser to
// locate you.

function initMap() {
  var map = new google.maps.Map(document.getElementById('map'), {
    center: {lat: -34.397, lng: 150.644},
    zoom: 6
  });
  var infoWindow = new google.maps.InfoWindow({map: map});

  // Try HTML5 geolocation.
  if (navigator.geolocation) {
    navigator.geolocation.getCurrentPosition(function(position) {
      var pos = {
        lat: position.coords.latitude,
        lng: position.coords.longitude
      };

      infoWindow.setPosition(pos);
      infoWindow.setContent('Location found.');
      map.setCenter(pos);
    }, function() {
      handleLocationError(true, infoWindow, map.getCenter());
    });
  } else {
    // Browser doesn't support Geolocation
    handleLocationError(false, infoWindow, map.getCenter());
  }
}

function handleLocationError(browserHasGeolocation, infoWindow, pos) {
  infoWindow.setPosition(pos);
  infoWindow.setContent(browserHasGeolocation ?
                        'Error: The Geolocation service failed.' :
                        'Error: Your browser doesn\'t support geolocation.');
}
<div id="map"></div>
/* Always set the map height explicitly to define the size of the div
 * element that contains the map. */
#map {
  height: 100%;
}
/* Optional: Makes the sample page fill the window. */
html, body {
  height: 100%;
  margin: 0;
  padding: 0;
}
 <!-- Replace the value of the key parameter with your own API key. -->
<script async defer
src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk&callback=initMap">
</script>


Probieren Sie es selbst aus

Bewegen Sie die Maus oben rechts über den Codeblock, um den Code zu kopieren, oder öffnen Sie ihn in JSFiddle.

<!DOCTYPE html>
<html>
  <head>
    <title>Geolocation</title>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
    <meta charset="utf-8">
    <style>
      /* Always set the map height explicitly to define the size of the div
       * element that contains the map. */
      #map {
        height: 100%;
      }
      /* Optional: Makes the sample page fill the window. */
      html, body {
        height: 100%;
        margin: 0;
        padding: 0;
      }
    </style>
  </head>
  <body>
    <div id="map"></div>
    <script>
      // Note: This example requires that you consent to location sharing when
      // prompted by your browser. If you see the error "The Geolocation service
      // failed.", it means you probably did not give permission for the browser to
      // locate you.

      function initMap() {
        var map = new google.maps.Map(document.getElementById('map'), {
          center: {lat: -34.397, lng: 150.644},
          zoom: 6
        });
        var infoWindow = new google.maps.InfoWindow({map: map});

        // Try HTML5 geolocation.
        if (navigator.geolocation) {
          navigator.geolocation.getCurrentPosition(function(position) {
            var pos = {
              lat: position.coords.latitude,
              lng: position.coords.longitude
            };

            infoWindow.setPosition(pos);
            infoWindow.setContent('Location found.');
            map.setCenter(pos);
          }, function() {
            handleLocationError(true, infoWindow, map.getCenter());
          });
        } else {
          // Browser doesn't support Geolocation
          handleLocationError(false, infoWindow, map.getCenter());
        }
      }

      function handleLocationError(browserHasGeolocation, infoWindow, pos) {
        infoWindow.setPosition(pos);
        infoWindow.setContent(browserHasGeolocation ?
                              'Error: The Geolocation service failed.' :
                              'Error: Your browser doesn\'t support geolocation.');
      }
    </script>
    <script async defer
    src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap">
    </script>
  </body>
</html>

Was ist die Standortbestimmung?

Der Begriff Standortbestimmung bezieht sich auf die Ermittlung des geografischen Standorts eines Nutzers oder eines Computers über eine Vielzahl von Datenerfassungsmechanismen. In der Regel verwenden die meisten Standortbestimmungsdienste Netzwerkroutingadressen oder interne GPS-Geräte zur Bestimmung des Standorts. Geolocation ist eine gerätespezifische API. Dies bedeutet, dass Browser oder Geräte die Standortbestimmung unterstützen müssen, damit sie über Webanwendungen genutzt werden kann.

W3C Geolocation-Standard

Anwendungen, die eine Standortbestimmung durchführen sollen, müssen den W3C Geolocation-Standard unterstützen. Hinweis: Mit dem obigen Code wird der Standort eines Nutzers über die W3C-Eigenschaft navigator.geolocation bestimmt.

Einige Browser verwenden IP-Adressen, um den Standort eines Nutzers zu erkennen. Es handelt sich dabei jedoch möglicherweise nur um eine grobe Schätzung eines Nutzerstandorts. Der W3C-Ansatz ist der unkomplizierteste und am weitesten verbreitete Ansatz. Daher sollte er gegenüber anderen Verfahren zur Standorterkennung priorisiert werden.

Der Parameter Sensor

Zuvor war in der Google Maps JavaScript API der Parameter sensor erforderlich. Damit wurde festgelegt, ob seitens der Anwendung ein Sensor zur Ermittlung des Nutzerstandorts verwendet wurde. Dieser Parameter wird nicht mehr benötigt.

Feedback geben zu...

Google Maps JavaScript API
Google Maps JavaScript API