HTML5 Geolocation API Nasıl Kullanılır?

Geolocation API W3C tarafından, istemci taraflı olarak konum bilgisi alabilmek için standartlaştırılmış bir arayüzdür. Geolocation API hayatımıza HTML5 ile birlikte girmiştir. Konum bilgisinin başlıca kaynakları IP Adresi, Wi-Fi, RFID, GSM/CDMA hücre kimliği ve GPS bilgisidir. Ancak bu API hiçbir zaman doğru konum sonucu elde edileceğini garanti etmez.

Geolocation API an itibariyle tüm modern tarayıcılar ve IE9 tarafından desteklenmektedir. Bunun yanında konum bilgisi alınmasının asıl önemi mobil alanda ortaya çıkmaktadır. Android (2.0+) ve IOS gibi başlıca mobil işletim sistemleri de Geolocation API’yi desteklemektedir.

Konum bilgisinin tek seferde veya sürekli güncellenerek alınması desteklenmektedir. Bu da konum bilgisinin doğruluk oranının artırılması ve güncel  tutulmasını sağlamaktadır.

Şimdi Geolocation API’nin basit bir uygulamasını yapalım. Öncelikle sayfamızın yapısını hazırlayalım.

<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <title>Geolocation Demo</title>
    <script src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function() {
            initiate_geolocation();
        });
    </script>
</head>
<body>
</body>
</html>

Daha sonra konumu alacak initiate_geolocation javascript fonksiyonunu yazalım.

function initiate_geolocation() {
    if (navigator.geolocation) {
        navigator.geolocation.getCurrentPosition(handle_geolocation_query, handle_errors);
    }
  else{
        $("body p strong").html("Cihazınız konum belirleme özelliği desteklemiyor.<br/>Yönlenlendiriliyorsunuz...");
       // burada konum belirleme özelliği olmaması durumunda ne yapmak istiyorsanız o işlemi yapınız
    }
 }

Fonksiyonda görüldüğü üzere sorguyu kontrol edecek handle_geolocation_query ve hataları yönetmenizi sağlayacak handle_errors fonksiyonlarına ihtiyacımız var.

function handle_geolocation_query(position){
    var lat = position.coords.latitude;
    var lng = position.coords.longitude;
    $("body").append($("<p></p>")).html("Enlem: " + lat + ", Boylam: " + lng);
 }

function handle_errors(error) {
    switch(error.code)
    {
         case error.PERMISSION_DENIED:
             alert("Konum bilgisi paylaşılmadığı için işlem tamamlanamadı.");
             break;
         case error.POSITION_UNAVAILABLE:
             alert("Mevcut konumunuz tespit edilemedi");
             break;
         case error.TIMEOUT:
             alert("Konum tespiti sırasında zaman aşımı meydana geldi");
             break;
         default:
             alert("Bilinmeyen Hata");
             break;
    }
}

Sayfayı çalıştırdığınız zaman tarayıcınızda aşağıdakilere benzer bir uyarı alacaksınız.

İzin verme işleminde sonra sayfada enlem ve boylam bilgilerini görebilirsiniz.

Buraya kadar yapılan örneğin, demosunu buradaki linkten görebilirsiniz.

Örneğimizi bir sonraki aşamaya taşımak için elde ettiğimiz konum bilgisini haritada gösterebiliriz. Bunun için Google Maps API kullanacağız ve bunun için de burdaki sayfadan API anahtarı almanız gerekmekte. Anahtarı aldıktan sonra javascript dosyasını aşağıdaki gibi sayfaya eklemeniz gerekli.

<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?key=API_KEY&sensor=false"></script>

API_KEY yerine aldığınız anahtarı yazmanız yeterli. Haritayı oluşturacağımız fonksiyon ise aşağıdaki gibi olacaktır.

function init_map(lat, lng) {
    var myLatlng = new google.maps.LatLng(lat, lng);
    var myOptions = {
        zoom: 12,
        center: myLatlng,
        mapTypeId: google.maps.MapTypeId.ROADMAP
    };
    var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
    var marker = new google.maps.Marker({
        position: myLatlng,
        map: map
    });
}

Yukarıda görüldüğü üzere haritamızın gösterilmesi için sayfamızda <div id=”map_canvas” style=”width:400px;height:400px”></div> olmalı.

Bütün bu işlemlerden sonra daha önce yazdığımız handle_geolocation_query fonksiyonunu aşağıdaki gibi düzenlemeliyiz.

function handle_geolocation_query(position){
    var lat = position.coords.latitude;
    var lng = position.coords.longitude;
    init_map(lat,lng);
}

Sayfayı çalıştırdığımız zaman mevcut konumumuzu aşağıdaki gibi görebiliriz.

Harita örneğini içeren demo sayfasını da buradan görebilirsiniz.

Temel olarak Geolocation API ve Google Maps ile kullanımını anlatmaya çalıştım. Katkıda bulunmak ve soru sormak için yorum bölümünü kullanabilirsiniz.

Comments

  1. map.html sayfasının örneğini koyabilirmisiniz kodları kopyalayarak sayfa olusturuyorum kendi api key imide kullanıyorum fakat bir türlü konum için izin istemiyor sayfa Konum bilgisi paylaşılmadığı için işlem tamamlanamadı uyarısı aalıyorum sizin örnek sayfanızı olusturmayı başaramadım bir türlü

    Reply
    • Merhaba Çağrı Öztürk,

      Yaptığınız dosyayı muhtemelen kendi bilgisayarınızdan çalıştırmaya çalıştığınız için bu hatayla karşılaşıyorsunuz. Bilgisayardan değilde herhangi bir host üzerinden çalıştırınız.

      Localhosttan konum bilgisine ulaşamazsınız.

      Admin(Emin Bey) dropbox üzerinden verdiğiniz örnek kodlar ise ip üzerinden çektiği için net adresi vermemektedir. Yukarıdaki örnekte ise net adresi alabiliyoruz. en azından dropboxdakine göre daha iyi :)

      Reply
  2. Güzel bir çalışma olmuş. Teşekkürler. Chrome 23 ve Firefox 17.0 de lokasyonu gayet başarılı olarak buluyor ancak IE 10 da ufak bir sapma var. Neden öyle acaba ?

    Reply
  3. iyi çalışmalar hocam, anlatım gayet güzel olmuş. üniversitede son sınıf öğrencisiyim bitirme çalışmasını bu konu hakkında yapmak istiyorum.
    Ailelerin çocuklarının nerede olduğunu öğrenmek veya takip etmek için bu tarz bir uygulamayı düşünüyorum. Aile çocuğunun telefonuna kurduğu programla, kendi telefonunda konumu iste dediğinde, çocuğun interneti açık olmak şartıyla konum bilgisini alabileceğimiz bir uygulama yapabilir miyim? Yardımı olabilir misin?

    Reply
    • selamlar. mobil programlamanın temellerini öğrenirsen istediğin şeyi rahatlıkla yaparsın. kimsenin yardımına ihtiyacın kalmaz.

      Reply
  4. kardeş ellerine sağlık ancak burada bana konum bilgilerini bir labele aktarmam gerekiyor yani işaretçi hangi bölümü işaretlerse oranın konum bilgisi labela yazılsın istiyorum buna çok ihtiyacım var

    Reply
  5. Emin can hocam benim yapmak istediğim sayfanın sağında bir map olacak map te bir bölgeye tıklayınca solda ki textbox lara o bölgenin
    il
    ilçe
    mahalle
    koordinat
    gibi bilgilerin gelmesini istiyorum ama bir türlü yapamadım bunun gibi bir örnek var mı varsa bana yardımcı olabilirmisiniz

    Reply
    • Selamlar. Daha önce yaptığım bir site var: nerdeyim.net . Aynen senin istediğin şeyler bu sitede var ve hepsini javascriptle yaptım. Nasıl yaptığımı http://www.nerdeyim.net/js/main.js burdan inceleyebilirsin. Tabi bu dosya minify edilmiş durumda, online bir araçla bunu daha okunabilir hale getirebilirsin.

      Reply
  6. Emin bey çok faydalı döküman teşekkür ederim. Sizden ricam nerdeyim.net’teki locations php’nin örnek kodlarını gösterebilir misiniz? json var sanırım.

    Reply
  7. hocam başarılı bir makale olmuş tebrik ederim işime yaradı iyi çalışmalar

    Reply
  8. mrb hocam . bende google maps apıyle uğraşıyorum fakat haritada
    işaretleyici yerine istedğim bi fotoyu koymak istiyorum nasıl yapabılırım?

    Reply
  9. Merhaba,
    Burada anlattığınız bütün adımları takip ettim. api key de aldım fakat bir uyarı ile karşılaştım.

    “Bu sayfa Google Haritalar öğesini görüntüleyemedi. Sağlanan Google API anahtarı geçersiz veya bu sitenin onu kullanma yetkisi yok. Hata Kodu: InvalidKeyOrUnauthorizedURLMapError”

    sebebi nedir? Nasıl çözebilirim?

    Reply

Leave a Reply to eren tatar Cancel reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>