Standort auf der Google Map mit der HTML5 Geolocation API anzeigen

Heute orten wir die Position unseres Gerätes über die HTML5 Geolocation API und zeigen die eigene Position auf der Google Karte an. Dazu nutzen wir das zuvor erstellte jQuery Plugin.

Wir nutzen unser im vorherigen Tutorial erstelles jQuery Map Plugin um eine Google Karte mit einem Marker erzeugen zu können. Um die eigene Ortung zu starten, sollte unser Browser / Gerät die Geolocation API unterstützen. Um das sicherzustellen binden wir Modernizr ein.

Danke an Mark Lee, der die Geolokalisierung in einem einfachen Beispiel auf seinem Blog erklärt hat.

Vorbereitung

Wir benötigen den Rahmen aus meinem jQuery Plugin und natürlich das Plugin selbst. Außerdem laden wir uns die neueste Version von modernizr von der offiziellen modernizr-Website und binden diese in unser HTML-Gerüst ein.

Hier reicht es, wenn ihr nur die Gelocation API unter Misc aktiviert um eine möglichst kleine Datei zu erhalten.

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Map Plugin</title>
<script src="https://maps.googleapis.com/maps/api/js?sensor=false"></script>
<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<script src="modernizr.js" type="text/javascript"></script>
<script src="map.js" type="text/javascript"></script>
 
<style>
.map {
	width: 500px;
	height: 500px;
}
</style>
</head>
 
<body>
 
<div class="map">
</div>
 
</body>
</html>

Die Geolokalisierung

In unserer map.html benötigen wir zunächst eine Abfrage ob der Browser die geolocation API unterstützt. Wenn nicht, benachrichtigen wir den Benutzer mit einem simplen Alert. Bei Erfolg allerdings starten wir die Ortung und der Spaß kann beginnen.

Die Funktion getCurrentPosition hat drei Parameter.

enableHighAccuracy

Steuert die Genauigkeit der Ortung: Wenn der Wert auf true gesetzt wird, benötigt euer Gerät mehr Strom und Zeit, kann aber die Position genauer bestimmen. Eine normale Genauigkeit genügt uns in diesem Beispiel. Bei Real Time Navigation o.ä., wie in Navigationssystemen ist ein sehr genauer Wert erforderlich.

timeout

Der Wert Timeout bestimmt, wann das Gerät aufgeben soll, die Position zu bestimmen bzw. wie lange darf er es versuchen. Wir versuchen es 5 Sekunden.

maximumAge

Der Parameter maximumAge bestimmt das Caching Verhalten der Position, wie lange darf die zuletzt gefundene Position erneut genutzt werden oder muss neu lokalisiert werden. Wir möchten mit 0 immer die aktuelle Position.

$(document).ready(function(){
	// Kann dein Browser die Position bestimmen? Modernizr hat die Antwort
	if (Modernizr.geolocation) {
 
	var options = {
      enableHighAccuracy: false,
      timeout: 5000,
      maximumAge: 0
    };
 
    // die Funktion getCurrentPosition() wird nun aufgerufen
    navigator.geolocation.getCurrentPosition(getPositionSuccess, getPositionError, options);
	}
	else
	{
		alert('Dein Browser unterstützt dieses coole Feature leider nicht!');
	}
});

Fallback-Funktionen

Die Funktion navigator.geolocation.getCurrentPosition(getPositionSuccess, getPositionError, options)versucht nun die Position zu bestimmen.

Wir legen zwei zusätzliche Funktionen an, die als Callback-Funktionen dienen.

Bei Erfolg wird getPositionSuccess() aufgerufen und die Funktion getPositionError() sollte uns über eine fehlgeschlagene Ortung informieren.

// Ortung geglückt
function getPositionSuccess(pos){
 
    // wir holen uns die Geodaten vom übergebenen Objekt
    var currentLng = pos.coords.longitude;
    var currentLat = pos.coords.latitude;
 
    // wir übergeben die soeben gewonnen Geokoordinaten an unser Map Plugin um diese auf der Karte zu zeigen
    $('.map').cinMap(
    {
        'zoom': 15,
        centerLat: currentLat,
        centerLng: currentLng
    }
    );
}
 
// Ortung misslungen
function getPositionError(){
	alert('Leider konnte deine Position nicht bestimmt werden.');
}