Standortkoordinaten simulieren mit den Dev Tools in Chrome

Google Chrome Standortkoordinaten simulieren

Vor Kurzem ist mir in Chromes Dev Tools aufgefallen, dass man, neben dem Ausgabegerät und Medium, auch die Standortkoordinaten simulieren kann. Wenn man beispielsweise mit HTML5 Geolocation arbeitet und die Location der Benutzer erfasst, kann man alternative Koordinaten angeben, um so verschiedene Locations zu testen. Weil das ein gar nicht so unpraktisches Feature ist, habe ich ein kleines Beispiel vorbereitet.

Was dieser Artikel abdeckt

  • Google Maps mit der Google Maps API einbinden
  • Koordinaten einer Adressen herausfinden
  • Location mit HTML5 Geolocation erfassen
  • Marker in einer Google Map setzen
  • Standortkoordinaten simulieren

Hinweis: Wenn du die Dateien herunterlädst, musst du sie auf einen (virtuellen) Server laden, da Geolocation sonst in manchen Browsern (bspw. Chrome ) nicht funktioniert.

Google Maps mit der Google Maps API einbinden

Zu Beginn legen wir ein HTML Dokument an, binden Google Maps ein und initialisieren eine neue Map. Zusätzlich muss der Map auch noch Höhe und Breite zugewiesen werden, weil sie sonst nicht angezeigt wird.

Höhe und Breite angeben

.map { 
  width: 100%; 
  height: 400px; 
}

Button erstellen, Container für die Map definieren und Google Maps API laden

<button class="getlocation">Location erfassen!</button>

<div class="map"></div>

<script src="https://maps.googleapis.com/maps/api/js?v=3.exp"></script>

Einstellungen festlegen und Map einbinden

var map;

function initialize() {
  /* Einstellungen für die Map */
  var optionen = {
    /* Je höher die Zahl, desto näher wird rangezoomt */
    zoom: 17,
    /* Koordinaten, die die Mitte der Map definieren */
    center: new google.maps.LatLng(48.229433,16.371475)
  };

  /* Map-Container auswählen, Map einbinden und Eigenschaften anwenden */
  map = new google.maps.Map(document.querySelector('.map'), optionen);
}

Sobald die Seite geladen hat, initialize Funktion aufrufen

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

Alles zusammen

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Geolocation</title>
    <style>
      .map {
        width: 100%; 
        height: 400px;
      }
    </style>
  </head>
  <body>
    <button class="getlocation">Location erfassen!</button>
    <div class="map"></div>

    <script src="https://maps.googleapis.com/maps/api/js?v=3.exp"></script>
    <script>
      var map;

      function initialize() {
        var optionen = {
          zoom: 17,
          center: new google.maps.LatLng(48.229433,16.371475)
        };

        map = new google.maps.Map(document.querySelector('.map'), optionen);
      }
      google.maps.event.addDomListener(window, 'load', initialize);
    </script>
  </body>
</html>

Koordinaten einer Adressen herausfinden

Die Map haben wir zentriert, indem wir bestimmte Koordinaten übergeben haben.

center: new google.maps.LatLng(48.229433,16.371475)

Koordinaten einer Adresse lassen sich sehr einfach herausfinden. Auf latlong.net gibt man eine Adresse ein und bekommt die passenden Koordinaten zurück. Auf der Website kann man außerdem auch Koordinaten eingeben und eine Adresse zurückbekommen.

Location mit HTML5 Geolocation erfassen

Nachdem wir jetzt eine Map haben, wollen wir im nächsten Schritt die Standortkoordinaten des Benutzers erfassen und einen Marker setzen, wenn auf den Button geklickt wird.

Abfragen, ob der Browser Geolocation beherrscht

if(navigator.geolocation) {
  console.log("Lade Koordinaten");
} else {
  console.log("Ihr Browser beherrscht Geolocation leider nicht");
}

Standortkoordinaten abfragen

navigator.geolocation.getCurrentPosition(function(position) {
  console.log("Koordinaten gefunden");
}, 

Wenn die Location nicht gefunden werden konnte

function() {
  console.log("Geolocation Service nicht verfügbar");
});    

Alles zusammen

document.querySelector('.getlocation').addEventListener('click', function() {
  if(navigator.geolocation) {
    console.log("Lade Koordinaten");

    navigator.geolocation.getCurrentPosition(function(position) {
      console.log("Koordinaten gefunden");
    }, function() {
      console.log("Geolocation Service nicht verfügbar");
    });
  } else {
    console.log("Ihr Browser beherrscht Geolocation leider nicht");
  }
})

Die Location wird also mit navigator.geolocation.getCurrentPosition() erfasst. Der Methode kann man drei Parameter übergeben (erfolg, fehler, optionen).

navigator.geolocation.getCurrentPosition(function(position) {
    console.log(position);
}, function(error) {
    console.log(error)
}, {
    option: wert
});

Details zur Anwendung von Geolocation findet man im Mozilla Developer Network.

Marker in einer Google Map setzen

Sobald wir die Koordinaten erfasst haben, übergeben wir sie an Maps und setzen einen Marker.

Bei Erfolg Koordinaten an Maps übergeben

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

Neuen Marker an der ermittelten Position setzen

var marker = new google.maps.Marker({
  position: pos,
  map: map
});

Map zentrieren

map.setCenter(pos); 

Alles zusammen:

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

  var marker = new google.maps.Marker({
    position: pos,
    map: map
  });

  map.setCenter(pos);
}

Wenn man nun auf den Button klickt, wird man beim ersten Mal gefragt, ob man die Standortkoordinaten auch wirklich teilen will. Wenn man das bestätigt, wechselt die Map zu den definierten Koordinaten und setzt einen Marker.

Geolocation - Location check

Standortkoordinaten simulieren

Möchte man nun andere Standortkoordinaten simulieren, muss man die Dev Tools öffnen, den drawer anzeigen und auf den Emulation-Tab wechseln.

Dev Tools öffnen

Die Dev Tools lassen sich mit Command + ALT + I öffnen.

+ + I

Emulation Tab

In den Dev Tools klickt man rechts oben auf das Icon neben dem Zahnrad, wechselt zum Emulation-Tab und zieht den Drawer nach oben. Zusätzlich muss man noch die Emulation togglen, was mit einem Klick auf das Smartphone Icon rechts neben der Lupe erledigt ist.

Google Chrome Emulation Tab

Alternative Standortkoordinaten

Im Emulation-Tab gibt es links ein Menü und unter dem Untermenüpunkt Sensors kann man die Standortkoordinaten simulieren, indem man die Checkbox Emulate geolocation coordinates aktiviert und die geografische Breite (lat) und Länge (lon) angibt.

Google Chrome Standortkoordinaten simulieren

Klickt man jetzt auf den Location erfassen-Button wird nicht mehr die echte Position genommen, sondern die angegebene. Alternativ kann man mit der Emulate position unavailable Checkbox auch testen, was passiert, wenn die Location nicht erfasst werden konnte.

Fazit

Die Arbeit mit der Google Maps API und Geolocation macht nicht nur Spass, sondern ist auch nicht sonderlich kompliziert, wenn man sich ein bisschen eingearbeitet hat. Zusätzlich wird uns die Arbeit durch die Möglichkeiten, die die Dev Tools bieten, erleichtert.

Quellen

https://developers.google.com/maps/documentation/javascript/examples/map-simple?hl=de
http://diveintohtml5.info/geolocation.html
https://developer.mozilla.org/en-US/docs/Web/API/Geolocation/Using_geolocation

Manuel Matuzovic

Frontend Developer aus Wien.

Schreibe einen Kommentar

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