HTML5 Geolocation

HTML5 ile birlikte gelen, kullanıcı konumu bulmayı sağlayan Geolocation API ile konum bilgilerini almayı ve alınan bilgilerle harita üzerinde konum göstermeyi anlattım.

HTML5 Geolocation API sayfanızı ziyaret eden kullanıcının konumunu bulmak için kullanılır.

Kullanıcıların gizlilik haklarını ihlal edebileceğinden, kullanıcıya konum paylaşım onay ekranı gelir, onaylamaz ise bilgiler alınmaz.

Tarayıcı desteği

Tablodaki değerler HTML5 Geolocation API destekleyen ilk tarayıcı sürümlerini belirtir.

API Chrome IE / Edge Firefox Safari Opera
Geolocation 5.0 – 49.0 (http)
50.0 (https)
9.0 3.5 5.0 16.0

NOT: Google Chrome tarayıcısı, sürüm 50 itibariyle Geolocation API desteği sadece güvenlik sertifikası olan(HTTPS) sitelerde çalışmaktadır.

HTML5 Geolocation kullanımı

HTML5 konum bilgileri navigator.geolocation JavaScript nesnesi getCurrentPosition metodu ile alınmaktadır.

<script>
  function konumuGetir() {
    if (navigator.geolocation) {
      navigator.geolocation.getCurrentPosition(konumuGoster);
    } else {
      document.write("Tarayıcınız Geolocation API desteklemiyor.");
    }
  }

  function konumuGoster(konum) {
    document.write("Enlem: " + konum.coords.latitude);
    document.write("<br />");
    document.write("Enlem: " + konum.coords.longitude);
  }

  konumuGetir();
</script>

Örneğin açıklaması,

  • İlk olarak tarayıcının Geolocation API desteğini kontrol ettik.
  • Tarayıcı Geolocation API destekliyorsa getCurrentPosition metodunu çalıştırdık.
  • Tarayıcı desteklemiyorsa kullanıcıya bilgi verdik.
  • getCurrentPosition metodu başarılı olursa, konum parametre nesnesi alan konumuGoster fonksiyonuna değerleri gönderdik.
  • konumuGoster fonksiyonu içerisinde Enlem ve Boylamı yazdırdık.

Yukardaki basit kullanımda, oluşabilecek hatalara karşı önlem alınmamıştır.

HTML5 Geolocation hata yakalama

Geolocation API getCurrentPosition metodu ikinci parametresi konum bilgisini almaya kullanıcı onay vermediği, konumun bulunamadığı, zaman aşımı veya diğer durumlarda kullanıcıya bilgi vermek için kullanılır.

<script>
  function konumuGetir() {
    if (navigator.geolocation) {
      navigator.geolocation.getCurrentPosition(konumuGoster, hataGoster);
    } else {
      document.write("Tarayıcınız Geolocation API desteklemiyor.");
    }
  }

  function konumuGoster(konum) {
    document.write("Enlem: " + konum.coords.latitude);
    document.write("<br />");
    document.write("Enlem: " + konum.coords.longitude);
  }

  function hataGoster(hata) {
    document.write(hata.message);
  }

  konumuGetir();
</script>

HTML5 Geolocation konumu haritada görüntüleme

Geolocation API ile alınan enlem ve boylam bilgilerini Google, Bing, Yandex vb. harita hizmetlerine göndererek konumu harita üzerinde gösterebiliriz.

<div id="harita"></div>
<script src="https://maps.google.com/maps/api/js"></script>
<script>
  function konumuGetir() {
    if (navigator.geolocation) {
      navigator.geolocation.getCurrentPosition(konumuGoster, hataGoster);
    } else {
      document.write("Tarayıcınız Geolocation API desteklemiyor.");
    }
  }

  function konumuGoster(konum) {
    enlem = konum.coords.latitude;
    boylam = konum.coords.longitude;
    latlon = new google.maps.LatLng(enlem, boylam)
    harita = document.getElementById('harita')
    harita.style.height = '500px';
    harita.style.width = '500px';

    var secenekler = {
      center: latlon, zoom: 14,
      mapTypeId: google.maps.MapTypeId.ROADMAP,
      mapTypeControl: false,
      navigationControlOptions: { style: google.maps.NavigationControlStyle.SMALL }
    }

    var map = new google.maps.Map(harita, secenekler);
    var marker = new google.maps.Marker({ position: latlon, map: map, title: "Buradasınız!" });
  }

  function hataGoster(hata) {
    document.write(hata.message);
  }

  konumuGetir();
</script>

Dahası

Geolocation API getCurrentPosition metodunu coords özelliğinin accuracy, altitudeAccuracy, speed vb. daha detaylı bilgi veren değerleri vardır.

Geolocation API watchPosition, clearWatch gibi metotlara da sahiptir.

getCurrentPosition metodu yerine watchPosition metodunun kullanılması hareket halinde olan kullanıcıların konumlarının sürekli olarak güncellenmesi sağlanır.

clearWatch metodu ise watchPosition metodunun sürekli güncellenmesini durdurur.

HTML5 Derslerine buradan ulaşabilirsiniz…

Hayırlı günler dilerim.

Bunlar da hoşunuza gidebilir...

Bir cevap yazın

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir