fboës - Der Blog von Frank Boës

Gute Neuigkeiten für alle Entwickler von Webanwendungen, die sich mit Geolocation beschäftigen: Immer mehr Browser erlauben das Auslesen der Position des Browsers via Javascript.

So gibt es für eigentlich alle Browser Google Gears, ein Plugin, das die Fähigkeiten des Browsers stark erweitert… und unter anderem die Funktion mitbringt, die Postion des Browsers zu bestimmen. Aber auch bestimmte Browser wie z.B. der Firefox 3.5, der Safari auf dem iPhone (seit OS 3.0) oder HTCs Android-Telefone erlauben ohne den Einsatz von Google Gears das Auslesen des eingebauten GPS’ (oder auch über andere Methoden de Lokalisierung) via Javascript.

Hier folgt ein kleines Beispiel, dass mit der vom W3C vorgeschlagenen Implementierung von Geolocation als auch mit dem Google Gears Geolocation umgehen kann. Dafür wird noch Mootools verwendet, aber im Endeffekt kann man jedem anderen beliebigen JS-Framework wie jQuery oder Prototype den selben Effekt erzielen - oder auch ganz ohne Framework arbeiten.

HTML-Code:

<script type="text/javascript" src="gears/gears_init.js"></script>
<script type="text/javascript" src="mootools.js"></script>
<input type="text" name="location" id="searchmask_location" />
<span style="display:none" id="location_button">
  <a href="#location">Use my position as start position</a>
</span>

Javascript:

if ($('location_button') && (
  (typeof (google)!="undefined" && typeof (google.gears)!="undefined") 
  || typeof (navigator.geolocation)!="undefined"
)) {

  function locateMe(ev) {
    var s = $('searchmask_location');
    highlight(s);
    s.value = 'Waiting...';
    if (typeof (geo)!="undefined" && geo.getPermission()) {
      geo.getCurrentPosition(updatePosition,noUpdatePosition,{
        enableHighAccuracy: true,
        gearsRequestAddress: true,
        gearsLocationProviderUrls: ['http://www.google.com/loc/json']
      });
    }
    else if (typeof (navigator.geolocation)!="undefined") {
      navigator.geolocation.getCurrentPosition(updatePosition,noUpdatePosition);
    }
    Event.stop(ev);
  }

  function updatePosition(position) {
    var s = $('searchmask_location');
    if (typeof (position.gearsAddress)!="undefined" && position.gearsAddress) {
      adr = position.gearsAddress;
      s.value = '';
      if(typeof adr.street       != 'undefined') s.value = adr.street;
      if(typeof adr.streetNumber != 'undefined') s.value = s.value+' '+adr.streetNumber;
      if(s.value != '') s.value = s.value + ', ';
      if(typeof adr.postalCode   != 'undefined') s.value = s.value+adr.postalCode;
      if(typeof adr.city         != 'undefined') s.value = s.value+' '+adr.city;
    }
    else if (position.coords.latitude && position.coords.longitude) {
      s.value = position.coords.latitude +','+ position.coords.longitude+' (Coordinates)';
    }
    highlight(s);
  }

  function noUpdatePosition() {
    var s = $('searchmask_location');
    s.value = 'Could not find your position... sorry';
    highlight(s);
  }

  function highlight(el) {
    el.highlight('#ffff88');  
  }

  if (typeof (google)!="undefined" && typeof (google.gears)!="undefined"){
    var geo = google.gears.factory.create('beta.geolocation');
  }
  $('location_button').addEvent('click', locateMe).style.display = 'block';
}

Ein Beispiel findet sich bei der Berlin.de Hotelsuche.