Orts-Daten mit Javascript


Hinweise


Die Zahlenwerte von Orts-Koordinaten sind für AnwenderInnen wenig anschaulich. Daher bietet dieses Beispiel die Möglichkeit, eine darauf basierende Landkarte zu laden.

Rechts ↑ oben ist Platz für eine GoogleMaps Landkarte reserviert.
Mit Klick auf den Button ↖ Karte wird von GoogleMaps eine Karte mit den aktuell eingetragenen geografischen Daten angefordert.

Wenn das Formular (noch) keine gültigen Daten enthält, dann werden die Koordinaten von Wien verwendet.

Details zur ↓ Verwendung von Landkarten und Satellitenbildern in eigenen Webseiten.



Javascript GeoLocation

(Live-Anforderung von Orts-Daten mit Javascript)


Firefox bietet direkt im Adressfeld ein Info-Icon, welches beim Anklicken die erteliten Rechte für die jeweilige Webseite anzeigt und unkompliziert eine Änderung ermöglicht.

📱 In der Konfiguration der meisten SmartPhones ist die Ermittlung der Ortsdaten generell freigegeben, weil die ständigen Anfragen der zahlreichen Apps lästig sind.
Ein gutes Betriebssystem ermöglicht es allerdings, die Zugangs-Rechte der Apps auch nach ihrer Installation selbst einzustellen und sie allen Apps zu entziehen, welche diese nur zu Werbe-Zwecken missbrauchen.


(1) Browser-Test

Vor Anwendung der GeoLocation-Methoden sollte man prüfen, ob das jeweilige Browser-Programm dazu in der Lage ist. Die GeoLocation-Methode ist nicht an GPS-Hardware gebunden, weil man die Position (mit geringerer Genauigkeit) auch aus der IP-Adresse der Internet-Verbindung ermitteln kann.

Diese Funktion kann als Beispiel dienen:
function geo_test() {
var t = 'Geo-Test ist ';
if(navigator.geolocation) {t+='erfolgreich';}
else {t+='negativ'}
alert(t);
}


Im Falle eines Scheiterns sollte man das dem jeweiligen User (z.B. mit einer alert()-Meldung) mitteilen, und natürlich nicht versuchen, die GeoLocation-Methoden trotzdem anzuwenden.


(3) Anforderung von Orts-Daten

Zur Anforderung der Daten verwendet man die Methode getCurrentPosition(), z.B.:
function geo_get() {
navigator.geolocation.getCurrentPosition(
geoSuccessFunction,
geoErrorFunction,
geoOptions);
}

Diese Methode erfordert mindestens 1 Argument, besser alle 3 hier vorgestellten Argumente.

Das 1. Argument gibt den genauen (!) Namen jener Funktion an, die bei Erfolg aufgerufen wird (hier geoSuccessFunction). Dieses Argument ist obligatorisch.

Das (optionale) 2. Argument gibt den genauen (!) Namen jener Funktion an, die bei Misserfolg aufgerufen wird (hier geoErrorFunction).

Das (optionale) 3. Argument gibt jene Objekt-Variable an, in welcher die Optionen definiert wurden (hier geoOptions).

Die Namen der (Callback)-Funktionen werden hier ohne nachfolgende () Klammern angegeben.



(5) Misserfolgs-Funktion

Diese Funktion wird automatisch aufgerufen, wenn die Anforderung der Orts-Daten nicht erfolgreich war.
Einfaches Beispiel:
function geoErrorFunction(errObj) {
var t = 'FehlerCode: '+errObj.code);
t += "\nFehlerMeldung: "+errObj.message);
alert(t);
}

Die Funktion erhält ein Objekt (hier errObj), dessen Eigenschaften ausgewertet werden.

Typische Fehler sind TIMEOUT (keine Antwort innerhalb der Wartezeit) oder PERMISSION_DENIED (keine Genehmigung vom User).

Methoden

In der Spezifikation ist nicht festgelegt, welche Methoden ein (Browser)-Programm zur Ermittlung von Orts-Daten anwenden kann.
Aspekte der Sicherheit sind wichtig, diese Seite beschränkt sich jedoch auf die Anwendung der GeoLocation in eigenen Entwicklungen.
In der Praxis sind es mehrere Methoden, deren Auswahl sich mit dem technischen Fortschritt und mit der User-Meinung ändern können und werden, z.B.

Jede Internet-Verbindung lässt sich mit einiger Genauigkeit orten, z.B. aus den bekannten Daten eines Internet-Providers oder einer Funk-Station.

Fast alle SmartPhones verfügen über ein GPS-Gerät, welches die Position auch ohne Internet- oder Telefon-Verbindung mit hoher Genauigkeit feststellen kann.

Landkarten-Steuerung mit Links


Im Gegensatz zum ↑ oben vorgestellten GeoLocation-Objekt sind die Objekte dieses Kapitels nicht normiert.
Die GoogleMaps und GoogleEarth Dienste sind derzeit in der allgemeinen Version kostenfrei. Es liegt jedoch im Ermessen von Google, die Programmierung oder die Nutzungs-Bedingungen für diese Dienste zu ändern !


HTML-Quelltext für ein Live-Beispiel:
<a href="http://maps.google.de/?ie=UTF8&ll=48.21,16.37&z=10" target="_blank"> </a>
Im Verweis-Ziel sind nach der Web-Adresse (URL) maps.google.de einige Argument angeführt:
ie: Zeichensatz, vorzugsweise → Unicode (UTF-8)
ll: Geografische Breite (latitude) und Länge (longitude) des Karten-Zentrums in Grad (mit Dezimal-Punkt !)
z: Verkleinerungs-Faktor (0 für maximale Vergrößerung)



Beispiel: TGM und Umgebung (eine höhere technische Lehranstalt in Wien) als Karte oder Satellitenbild

In weiteren Varianten dieser Dienste kann man eigene Marken auch in jene Karten eintragen, die von anderen Usern angefordert werden.



Landkarten-Steuerung mit Javascript


(2) Platz ('Canvas') formatieren

Es ist empfehlenswert, einige → CSS-Regeln zur Formatierung dieses Elements festzulegen, z.B. in einem <style>-Element innerhalb des <head>-Elements:
<style type="text/css">
#location_map{border:1px solid #AAF;
background-color:#EFE; padding:5px;
width:100%; height:300px;
resize:both; overflow:auto;}
</style>

Eine kleine Besonderheit ist die zusammen mit → HTML‑5 eingeführte Eigenschaft resize
In allen modernen Browsern kann damit jeder User die Größe eines <div>-Elements an der rechten unteren Ecke interaktiv ändern.


(4) Globale Variable

Der gesamte Javascript Quelltext wird in ein <script>-Element eingefügt, welches selbst im <head>-Element enthalten sein muss.
Die einstellbaren Vorgaben werden zweckmäßig als globale Variable verwaltet:
<script type="text/javascript">
var GoogleCenter = null;
var GoogleZoom = 12;
/* */
</script>
An der mit /* */ bezeichneten Stelle werden die beiden nachfolgend vorgestellten Funktionen eingesetzt.


(6) Karte anfordern

Mit dieser Funktion wird die Landkarte angefordert und - wenn alles korrekt abläuft - in das reservierte <div>-Element eingetragen.
function google_map_draw() {
var mapCanvas = document.getElementById('location_map');
var mapOptions={
center: GoogleCenter,
zoom: GoogleZoom,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(mapCanvas,mapOptions);
}
Die entscheidende Methode Map() erwartet 2 Argumente:
  • Das 1. Argument (hier mapCanvas) ist das für die Grafik reservierte Element als DOM-Objekt.
  • Das 2. Argument ist eine Objekt-Variable (hier mapOptions), welche die Vorgaben enthält.

Das Objekt mapOptions enthält 3 Eigenschaften:
  • center bestimmt den Mittelpunkt der Karte. Dieses Objekt wurde vorher (← Vorbereitung) mit der Methode LatLng() erzeugt.
  • zoom ist die Kennzahl für die gewünschte Vergrößerung. Sie wird auf den Wert der ← vorbereiteten Variablen GoogleZoom gesetzt.
  • mapTypeId bezeichnet den Karten-Typ.


GoogleMaps Informationen für EntwicklerInnen