The Latest
js-geolocation

Geolocation API – Mit Javascript GPS Koordinaten ermitteln

byAndreas Schmidt
12. Juni 2021
12 minute read

Die Geschichte der Koordinaten liegt weit zurück, denn schon um ca. 150 nach Chr. wurde vom griechischen Mathematiker Claudius Ptolemäus versucht die Erde in ein Gradnetz mit Längen- und Breitengraden einzuteilen. Leider wussten die Menschen bis dato nicht, wie groß der Umfang der Erde ist und lange war auch nicht ganz klar, ob die Erde überhaupt rund ist. Erst im 17. Jahrhundert konnten französische Wissenschaftler den Erdradius mit nur wenig Abweichung bestimmen. 1970 war es dann endlich so weit, das “Global Positioning System” erblickte das Licht der Welt, allerdings nur für das US-Militär, bis zur zivilen Nutzung mussten nochmal ca. 30 Jahre vergehen.

Genug mit der Geschichtsstunde, heutzutage ist alles zum Glück viel einfacher geworden, mit ein paar Zeilen Code in einem HTML-Dokument und einem Browser können wir auf Knopfdruck ermitteln, wo wir uns gerade befinden. Der alte Claudius würde bei diesem Anblick wahrscheinlich an Magie oder Geister denken, aber nein das Zauberwort heißt “Javascript”.

Die Funktion “Geolocation” ist nicht neu und es existieren mittlerweile zahlreiche Beispiele dafür im Web, dennoch finde ich das Thema sehr spannend und bei dem ein oder anderen Projekt konnte ich damit auch schon arbeiten.

Wie leicht es ist, mit Javascript die eigene Position zu ermitteln und was man damit alles noch so anfangen kann, erfahrt ihr nun in diesem Artikel.

01. Geolocation API

Die Geolocation API ist eigentlich eine Funktion für “Progressive Web Apps” kurz “PWA”. Im Gegensatz zu “nativen” Apps, die speziell für eine Plattform entwickelt werden, wie z.B. mit Java oder Kotlin für Android, kann eine “PWA” universell eingesetzt werden. Im Grunde ist eine “PWA” nichts anders als eine Website die installiert werden kann und auf gewisse Funktionen des Geräts zugreifen darf.

Die Bestimmung der Geräteposition ist so eine Funktion, daher müssen auch ein paar Spielregeln eingehalten werden. Besonders wichtig für die meisten Browser ist eine Verbindung über “https” oder “Localhost”, bei einer ungeschützten “http” Übertragung wird der Browser wahrscheinlich kein Ergebnis erzeugen. Außerdem muss der Nutzer vorher seine Zustimmung geben, damit soll gewährleistet werden, dass eine Website nicht heimlich die Adressen der Nutzer speichert.

Für Koordinaten existieren die unterschiedlichsten Schreibweisen. Die Geolocation API gibt das Ergebnis in der Darstellungsform “DDD“ (Dezimalgrad) aus, das ist für uns besonders gut, da “Javascript” nicht mit allen Sonderzeichen besonders gut klarkommt.

02. Geolocation – Basics

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>Geolocation - Basics</title>
	</head>
	<body>
		<form>
			<div class="form-group">
				<label class="form-label" for="lat">Latitude</label>
				<input class="form-input" id="lat" type="number" step="any" name="lat" placeholder="Latitude">
			</div>
			<div class="form-group">
				<label class="form-label" for="lng">Longitude</label>
				<input class="form-input" id="lng" type="number" step="any" name="lng" placeholder="Longitude">
			</div>

			<div class="form-footer">
				<button type="button" onclick="getLocation()">Geolocation</button>
			</div>
		</form>
		<script type="text/javascript">                      
			// geolocation
			function getLocation() {
				if(navigator.geolocation) {
					navigator.geolocation.getCurrentPosition(onGeoSuccess,onGeoError);
				}
				else {
					alert("Please check your permissions");
				}
			}

			//location
			function onGeoSuccess(position) {
				
				//Position Coords
				var latitude = position.coords.latitude;
				var longitude = position.coords.longitude;
				
				//Data to input
				document.getElementById("lat").value = latitude;
				document.getElementById("lng").value = longitude;
			}

			// Error
			function onGeoError(position) {
				alert("Error code " + position.code + ". " + position.message);
			}
		</script>
	</body>
</html>

Aufgabe:

Nach einem Klick auf den Button “Geolocation” wird die Position des jeweiligen Nutzers bestimmt. Die Koordinaten sollen dann in ein “Form” übertragen werden.

Lösung:

Als Erstes erstellen wir das “Form”, darin wollen wir die gewonnenen Daten anzeigen lassen. Danach widmen wir uns schon dem Thema Javascript. Mit einem Klick auf den Button “Geolocation” führen wir die Funktion “getLocation()” aus. 

function getLocation() {
  if(navigator.geolocation) {
    navigator.geolocation.getCurrentPosition(onGeoSuccess,onGeoError);
  }
  else {
    alert("Please check your permissions");
  }
}

Unsere Funktion frägt zuerst beim Browser nach mit “if(navigator.geolocation)“, ob die Position überhaupt ermittelt werden kann. Erwidert der Browser die Anfrage mit einem Booleschen “true” so wird die Position erfasst. Hat alles geklappt und die Ortung war erfolgreich, wird als Nächstes die Funktion “onGeoSuccess” ausgeführt. 

function getLocation() {
  if(navigator.geolocation) {
    navigator.geolocation.getCurrentPosition(onGeoSuccess,onGeoError);
  }
  else {
    alert("Please check your permissions");
  }
}	

function onGeoSuccess(position) {			
  var latitude = position.coords.latitude;
  var longitude = position.coords.longitude;
				
  document.getElementById("lat").value = latitude;
  document.getElementById("lng").value = longitude;
}


function onGeoError(position) {
  alert("Error code " + position.code + ". " + position.message);
}

Das Ergebnis der Ortung landet mit der Variable “position” in unserer Funktion “onGeoSuccess”. Jetzt müssen wir nur noch bestimmen, welche Werte aus “position” benötigt werden. Dazu bestimmen wir eine neue Variable für den Breitengrad “latitude” und geben ihr den passenden Wert dazu mit “position.coords.latitude”. Anschließend übertragen wir den Wert in unser “Form”.

Sollte die Positionsbestimmung fehlschlagen, wird die Funktion “onGeoError” ausgeführt. Hier lassen wir uns anzeigen was bei der Ortung schiefgelaufen ist.

03. Geolocation – Geocode

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>Geolocation - Geocode</title>
	</head>
	<body>
		<form>
			<div class="form-group">
				<label class="form-label" for="place">Place</label>
				<input class="form-input" id="place" type="text" name="ort" placeholder="Place">
			</div>
			<div class="form-group">
				<label class="form-label" for="street">Street</label>
				<input class="form-input" id="street" type="text" name="Street" placeholder="Street">
			</div>
			<div class="form-group">
				<label class="form-label" for="country">Country</label>
				<input class="form-input" id="country" type="text" name="country" placeholder="Country">
			</div>
			<div class="form-group">
				<label class="form-label" for="state">State</label>
				<input class="form-input" id="state" type="text" name="state" placeholder="State">
			</div>
			<div class="form-group">
				<label class="form-label" for="lat">Latitude</label>
				<input class="form-input" id="lat" type="number" step="any" name="lat" placeholder="Latitude">
			</div>
			<div class="form-group">
				<label class="form-label" for="lng">Longitude</label>
				<input class="form-input" id="lng" type="number" step="any" name="lng" placeholder="Longitude">
			</div>

			<div class="form-footer">
				<button type="button" onclick="getLocation()">Geolocation</button>
			</div>
		</form>
		<script type="text/javascript">                      
			// geolocation
			function getLocation() {
				if(navigator.geolocation) {
					navigator.geolocation.getCurrentPosition(onGeoSuccess,onGeoError);
				}
				else {
					alert("Please check your permissions");
				}
			}

			//location
			function onGeoSuccess(position) {
			
				//Google Apikey
				const googleapi = "YOUR_API_KEY";
				
				//Position Coords
				var latitude = position.coords.latitude;
				var longitude = position.coords.longitude;
				
				//Data to input
				document.getElementById("lat").value = latitude;
				document.getElementById("lng").value = longitude;
				
				//Position Data
				fetch("https://maps.googleapis.com/maps/api/geocode/json?key=" + googleapi + "&latlng=" + latitude + "," + longitude)
				.then(response => response.json())
				.then(data => {
				
					//Data 
					var postalcode = data.results[1].address_components[7].long_name;
					var placename = data.results[1].address_components[2].long_name;
					var streetname = data.results[1].address_components[1].long_name;
					var housenumber = data.results[1].address_components[0].long_name;			
					var country = data.results[1].address_components[6].long_name;
					var state = data.results[1].address_components[5].long_name;
					
					//Data to input
					document.getElementById("place").value = postalcode + " " + placename;
					document.getElementById("street").value = streetname + " " + housenumber;
					document.getElementById("country").value = country;
					document.getElementById("state").value = state;
								
				});		
			}

			// Error
			function onGeoError(position) {
				alert("Error code " + position.code + ". " + position.message);
			}
		</script>
	</body>
</html>

Aufgabe:

Nach einem Klick auf den Button “Geolocation” wird die Position des jeweiligen Nutzers bestimmt. Die Koordinaten sollen dann in ein “Form” übertragen werden mit der dazugehörigen Adresse.

Lösung:

Um die passenden Adressdaten finden zu können, benötigen wir eine Datenbank. Mit “Google Maps” und der “Geocode API” lässt sich das realisieren. Würden wir ganz auf “Google Maps” setzen, könnte man auch mit dem “Places service” arbeiten. Aber der Weg über die “Geocode API” ist universeller einsetzbar und kann z.B. auch mit “Python” verwendet werden. Die API verrät uns alle wichtigen Informationen zu einem Ort mithilfe von “json” oder wahlweise auch mit “XML”. Leider wird auch für die “Geocode API” ein “API Key” von Google benötigt. 

https://maps.googleapis.com/maps/api/geocode/json?key=YOUR_API_KEY&latlng=31.209004,29.908973

Über die angepasste Adresse der “Geocode API” können Daten via “json” abgerufen werden.

function onGeoSuccess(position) {
  const googleapi = "YOUR_API_KEY";
				
  var latitude = position.coords.latitude;
  var longitude = position.coords.longitude;
				
  document.getElementById("lat").value = latitude;
  document.getElementById("lng").value = longitude;
				

  fetch("https://maps.googleapis.com/maps/api/geocode/json?key=" + googleapi + "&latlng=" + latitude + "," + longitude)
  .then(response => response.json())
  .then(data => {
    var postalcode = data.results[1].address_components[7].long_name;
    var placename = data.results[1].address_components[2].long_name;
    var streetname = data.results[1].address_components[1].long_name;
    var housenumber = data.results[1].address_components[0].long_name;
    var country = data.results[1].address_components[6].long_name;
    var state = data.results[1].address_components[5].long_name;
					
    document.getElementById("place").value = postalcode + " " + placename;
    document.getElementById("street").value = streetname + " " + housenumber;
    document.getElementById("country").value = country;
    document.getElementById("state").value = state;
  });		
}

Im Detail bei unserer “onGeoSuccess” Funktion sieht das Ganze dann so aus. Wir fügen die ermittelten Koordinaten in die URL der “Geocode API” ein und können so die passenden Werte abrufen.

04. Geolocation – Google Maps

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>Geolocation - Maps</title>
	</head>
	<body>
		<style>
			#map {
			  height: 300px;
			  width: 300px;
			  margin: 0px 0px 30px 0px;
			  display: none;
			}
			
			#geocodejson {
			  display: none;
			}

			.form-group {
			  margin: 8px 0px 8px 0px;
			}

			.form-footer {
			  margin: 30px 0px 0px 0px;
			}
		</style>
		<div id="map"></div>
		<form>
			<div class="form-group">
				<label class="form-label" for="place">Place</label>
				<input class="form-input" id="place" type="text" name="ort" placeholder="Place">
			</div>
			<div class="form-group">
				<label class="form-label" for="street">Street</label>
				<input class="form-input" id="street" type="text" name="Street" placeholder="Street">
			</div>
			<div class="form-group">
				<label class="form-label" for="country">Country</label>
				<input class="form-input" id="country" type="text" name="country" placeholder="Country">
			</div>
			<div class="form-group">
				<label class="form-label" for="state">State</label>
				<input class="form-input" id="state" type="text" name="state" placeholder="State">
			</div>
			<div class="form-group">
				<label class="form-label" for="lat">Latitude</label>
				<input class="form-input" id="lat" type="number" step="any" name="lat" placeholder="Latitude">
			</div>
			<div class="form-group">
				<label class="form-label" for="lng">Longitude</label>
				<input class="form-input" id="lng" type="number" step="any" name="lng" placeholder="Longitude">
			</div>

			<div class="form-footer">
				<button type="button" onclick="getLocation()">Geolocation</button>
				<a id="geocodejson" href="#" target="_blank"><button type="button">Google Geocode Json</button></a>
			</div>
		</form>
		
		<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY"></script>
		<script type="text/javascript">                      
			// geolocation
			function getLocation() {
				if(navigator.geolocation) {
					navigator.geolocation.getCurrentPosition(onGeoSuccess,onGeoError);
				}
				else {
					alert("Please check your permissions");
				}
			}

			//location
			function onGeoSuccess(position) {
			
				//Google Apikey
				const googleapi = "YOUR_API_KEY";
				
				//Position Coords
				var latitude = position.coords.latitude;
				var longitude = position.coords.longitude;
				
				document.getElementById("lat").value = latitude;
				document.getElementById("lng").value = longitude;
				
				//Position Data
				fetch("https://maps.googleapis.com/maps/api/geocode/json?key=" + googleapi + "&latlng=" + latitude + "," + longitude)
				.then(response => response.json())
				.then(data => {
				
					//Data 
					var postalcode = data.results[1].address_components[7].long_name;
					var placename = data.results[1].address_components[2].long_name;
					var streetname = data.results[1].address_components[1].long_name;
					var housenumber = data.results[1].address_components[0].long_name;			
					var country = data.results[1].address_components[6].long_name;
					var state = data.results[1].address_components[5].long_name;
					
					//Data to input
					document.getElementById("place").value = postalcode + " " + placename;
					document.getElementById("street").value = streetname + " " + housenumber;
					document.getElementById("country").value = country;
					document.getElementById("state").value = state;
														
					//Map
					var LatLng = { lat: latitude, lng: longitude };
					var map = new google.maps.Map(document.getElementById("map"), {
						zoom: 12,
						center: LatLng
					});
					
					//Marker
					var marker = new google.maps.Marker({
						position: LatLng,
						animation: google.maps.Animation.DROP,
						map
					});
				
					//Info Window
					var infowindowtext = "<p>" + streetname + " " + housenumber + "<br />" + postalcode + " " + placename + "<br />" + country + "<br />" + state + "</p>";	
					var infowindow = new google.maps.InfoWindow({
						content: infowindowtext
					});
			
					//Open Window on click
					marker.addListener("click", function() {
						infowindow.open(map, marker);
					});
					
					//Google Geocode Json Button
					var url = "https://maps.googleapis.com/maps/api/geocode/json?key=" + googleapi + "&latlng=" + latitude + "," + longitude;
					document.getElementById("geocodejson").setAttribute('href', url);
					
					//Show
					document.getElementById("map").style.display = "inline-block";
					document.getElementById("geocodejson").style.display = "inline-block";					
				});		
			}

			// Error
			function onGeoError(position) {
				alert("Error code " + position.code + ". " + position.message);
			}
		</script>
	</body>
</html>

Aufgabe:

Nach einem Klick auf den Button “Geolocation” wird die Position des jeweiligen Nutzers bestimmt. Die Koordinaten sollen dann in ein “Form” übertragen werden mit der dazugehörigen Adresse. Des Weiteren soll auf einer Karte die Position zusätzlich dargestellt werden.

Lösung:

Der Klassiker aller Karten im Netz heißt “Google Maps”. Der Dienst ist aber nicht alternativlos. Auch das Projekt “OpenStreetMap” hat einiges zu bieten. Da die Meisten aber wahrscheinlich eher mit “Google Maps” vertraut sind, arbeite ich in dieser Anleitung damit.

Am Ende des Beitrags habt ihr wieder die Möglichkeit alle Daten herunterzuladen, ich habe dem Download auch noch eine HTML-Datei hinzugefügt die “Leaflet” und “OpenStreetMap” verwendet. 

//Map
var LatLng = { lat: latitude, lng: longitude };
var map = new google.maps.Map(document.getElementById("map"), {
  zoom: 12,
  center: LatLng
});
					
//Marker
var marker = new google.maps.Marker({
  position: LatLng,
  animation: google.maps.Animation.DROP,
  map
});

//Info Window
var infowindowtext = "<p>" + streetname + " " + housenumber + "<br />" + postalcode + " " + placename + "<br />" + country + "<br />" + state + "</p>";	
var infowindow = new google.maps.InfoWindow({
  content: infowindowtext
});
			
//Open Window on click
marker.addListener("click", function() {
  infowindow.open(map, marker);
});

Wir packen die “Google Maps” Parameter ebenfalls in unsere “onGeoSuccess” Funktion und lassen uns somit eine Karte mit den ermittelten Koordinaten anzeigen. Außerdem erzeugen wir einen “Marker” der angeklickt werden kann und die Adressdaten zeigt.

05. GEO URI Scheme

Also Bonus möchte ich zum Schluss noch das “GEO URI Scheme” vorstellen. Leider funktioniert der Parameter nur auf Mobilgeräten. Die relativ unbekannte Funktion liefert Koordinaten an beliebige Apps aus. Statt eines “Google Maps” Links der auch nur mit der entsprechenden App geöffnet werden kann, liefert das “GEO URI Scheme” die Positionsdaten an sämtliche Navi Apps wie z.B. “Here”.

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>GEO URI Scheme</title>
  </head>
  <body>
    <a href="geo:31.209004,29.908973"><button type="button">GEO</button></a>
  </body>
</html>

06. Download

Ich habe alle Files dieser Anleitung zusammengestellt, damit das Einrichten nochmal etwas schneller von der Hand geht. Ich hoffe, ihr habt genauso viel Spaß mit dem Projekt wie ich und jetzt wünsche ich euch gutes Gelingen.

zip-file-icon

artsblog-geolocation-js-master.zip

Filesize: 0,05 mb
Download
Author
Andreas Schmidt
Andreas Schmidt ist freiberuflicher Designer und Entwickler. Sein Hauptaugenmerk liegt in der Webentwicklung. Seine Kunden profitieren von individuellen Lösungen, bei denen auch das Thema Design und Benutzerfreundlichkeit nicht zu kurz kommen darf. 2020 gründete Andreas Schmidt den ArtsBlog, um zu Infomieren und erklären.
Related Posts