Tarayıcıdan Konum Bulma

 bcakir
 27 Aralık 2011

Merhaba arkadaşlar bu yazımda tarayıcıdan yer yani konum bilgisi bulma işlemini anlatacağım. Bu özellik Html5 ile geldi. Bundan dolayı da çok yeni ve bütün tarayıcılarda maalesef doğru çalışmıyor. En iyi sonuç Firefox‘da elde ediliyor. Ama bütün tarayıcılar kısa bir süre içerisinde bu hizmete destek vermek zorunda kalacaklar. Baştan bütün tarayıcılarda çalışmadığını söyleyeyim de sonradan problem olmasın. Ayrıca tarayıcınızın Html5 desteği yoksa yani eski sürüm browser kullanıyorsanız da çalışmaz. Uygulamamızda, Google haritasını ve Html5 ile gelen konum alma özelliğini kullanarak harita üzerinde yerinizi işaretleyeceğiz. Şimdi bu uygulamamızı yapalım.

<!DOCTYPE html>
<html>
<head>
<title>Tarayıcıdan Konum Bilgisi Alma</title>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript">
//Konumu bulup fonksiyonlara yönlendirme yap
if(navigator.geolocation){
  navigator.geolocation.getCurrentPosition(success, error);
}else{
  error('Desteklenmiyor.');
}

//Konum bulunduysa
function success(position){
  var status = document.querySelector('#durum');

  if (status.className == 'basarili'){
    return;
  }

  status.innerHTML = "bulundu.";
  status.className = 'basarili';

  var mapcanvas = document.createElement('div');
  mapcanvas.id = 'mapcanvas';
  mapcanvas.style.width = '600px';
  mapcanvas.style.height = '400px';

  document.querySelector('div').appendChild(mapcanvas);

  var kordinat = new google.maps.LatLng(position.coords.latitude, position.coords.longitude);
  var myOptions = {
    zoom: 15,
    center: kordinat,
    mapTypeControl: false,
    navigationControlOptions: {style: google.maps.NavigationControlStyle.SMALL},
    mapTypeId: google.maps.MapTypeId.ROADMAP
  };
  var map = new google.maps.Map(document.getElementById("mapcanvas"), myOptions);

  document.getElementById("konum").innerHTML='Kordinatlarınız: '+kordinat;

  var marker = new google.maps.Marker({
      position: kordinat,
      map: map,
      title:"Buradasın"
  });
}

//Hata ile karşılaşıldıysa
function error(msg){
  var status = document.querySelector('#durum');
  status.innerHTML = typeof msg == 'string' ? msg : "bulunamadı";
  status.className = 'basarisiz';

}
</script>
</head>
<body>
<div>
<p>Konumunuz: <span id="durum">hesaplanıyor...</span></p>
<p><span id="konum"></span></p>
</div>
</body>
</html>

Uygulamamızı yeni gelen Html5 özelliğini kullanarak geliştirdik. Günümüzün lokasyon tabanlı servislere doğru yöneldiğini gördüğümüzde, artık bilgisayarlamızın da buna yönelik değişikliklere uğraması pek muhtemel. Bundan dolayı da yeni çıkan özellikleri ne kadar çabuk kullanabilir ve bunlar ile ilgili uygulamalar geliştirirsek hep bir adım önde oluruz. Yine, sizlere farklı ufuklar açacak bir konuda yazı yazdığımı düşünüyorum. Böylece bu yazımında sonuna geldim. Yararlı olması dileğiyle.

 5.211 Okunma

Bu yazıya 8 yorum yapılmış.

  1. Bu kodları ben çalıştırınca sadece konum hesaplanıyor yazıyor. Detaylı bir kod yazabilirmisiniz?

    • Yukarıdaki açıklamaları detaylı okursanız, belirtmiştim bütün tarayıcılarda çalışmaz diye. Destekleyen tarayıcı ve bu tarayıcıların destekleyen sürümlerinde deneyiniz (HTML5 desteksiz sürümlerde hiç çalışmaz).

  2. Gerçekten mükemmel bir makale öncelikle teşekkür ederim. Fakat bir sorum olacak html5 destekli tarayıcıların hepsi ile çalışıyor buraya kadar bir sorun yok lakin tarayıcıların hepsinde konumu paylaşmak için izin verilmesi gerekli bunu kullanıcıya farkettirmeden (izin istemeden) yapmanın bir mümkünatı varmıdır?

    • Maalesef izin almadan konumunu bulamazsın, foursquare gibi siteler bile izin istiyor.

  3. Peki teşekkürler

  4. konumu yanlış buluyor mağlesef

  5. Merhaba yazınız için çok teşekkür ederim bir sorum olacaktı; konumumuzu anlık yani sürekli yenilenen bir şekilde nasıl işaretlerim ve başka bir cihazdan gelene yenilenen konumu nasıl gösteririm?

  6. Merhaba bir sorum olacaktı; ben enlem boylam olarak değil de bana sadece İstanbul Kadıköy gibi değer versin yani il ilçe değeri versin. Bunu istersem nasıl yapabilirim?

Yazı hakkında görüşlerinizi belirtmek istermisiniz?

Daha fazla Html/Html5, JavaScript
Kapat