HTML5 Geolocation API

HTML Geolocation (Coğrafi Konum) API, bir kullanıcının konumunu bulmak için kullanılır.

Denemek İçin Tıklayın

Coğrafi Konumunu Bulmak

Bu API ile kullanıcının bulunduğu konumu alabiliyoruz. Ancak gizlilikten dolayı, kullanıcı buna izin vermediği sürece alınamaz.

Geolocation API Kullanım

İlk olarak navigator.geolocation ile tarayıcının desteklenip desteklenmediği kontrol edilir.

if (navigator.geolocation){
    // tarayıcı destekliyor
} else {
    // tarayıcı desteklemiyor, hata mesajı vs. gösterebilirsiniz
}

Daha sonra kullanıcının konumunu almak için getCurrentPosition() metodunu kullanacağız. Bu metod 2 parametre alıyoruz. İlk parametre eğer kullanıcı izin verirse çalışacak callback fonksiyonu, ikinci parametre eğer bir hata olursa çalışacak olan callback fonksiyonu.

if (navigator.geolocation){
    navigator.geolocation.getCurrentPosition(showPosition, showError);
} else {
    // tarayıcı desteklemiyor, hata mesajı vs. gösterebilirsiniz
}

// başarılı ise bu fonksiyon çalışacak
function showPosition(position){
    console.log(position);
}

// bir hata olursa bu fonksiyon çalışacak
function showError(error){
    console.log(error);
}

Şimdi showPosition() metodunda bize gelen değerler şu şekildedir;

Şimdi tüm bilgileri toparlayarak çalışan bir örnek yapalım.

<button id="button">Konumumu Bul</button>
<div id="result"></div>

<script>
    // butonu seçelim
    let button = document.getElementById('button');
    
    // butona tıklandığında bunu yakalayalım
    button.onclick = function(){
        
        // tarayıcının destekleyip desteklemediğine bakalım
        if (navigator.geolocation) {
            
            // Eğer kullanıcı izin vermiş ise showPosition fonksiyonu çalışacak
            navigator.geolocation.getCurrentPosition(showPosition);
            
        } else {
            x.innerHTML = "Geolocation tarayıcınızda desteklenmiyor.";
        }
        
    };

    // position ile gönderilen datayı alıyoruz
    function showPosition(position){
        
        // sonuçları göstereceğimiz etiketi seçtik
        let result = document.getElementById('result');
        
        // sonuçları etiketimizin içinde gösteriyoruz
        result.innerHTML = `Enlem: ${position.coords.latitude} <br>
                            Boylam: ${position.coords.longitude}`;
        
    }
</script>

Hataları Yönetmek

getCurrentPosition() metodu 2. parametresi hata alındığında çalışır. Kullanıcı tarafından izin verilmediğinde ya da oluşabilecek diğer hataları bu fonksiyondan yönetmemiz gerekir. Dönebilecek değerler ise şunlardır;

Kodlarla bir örnek vermek gerekirse;

navigator.geolocation.getCurrentPosition(showPosition, showError);
    
function showError(error) {
    switch(error.code) {
        case error.PERMISSION_DENIED:
            console.log("Kullanıcı izin vermeyi reddetti.");
            break;
        case error.POSITION_UNAVAILABLE:
            console.log("Lokasyon bilgisi bulunamadı.");
            break;
        case error.TIMEOUT:
            console.log("İstek zaman aşımına uğradı.");
            break;
        case error.UNKNOWN_ERROR:
            console.log("Bilinmeyen bir hata oluştu.");
            break;
    }
}

function showPosition(position){
    console.log(position);
}

Konumu Haritada Göstermek

Google'ın maps hizmetini kullanarak kullanıcının enlem ve boylamını harita üzerinde gösterebiliriz. İhtiyacımız olan https://maps.googleapis.com/maps/api/staticmap?center=[ENLEM],[BOYLAM]&zoom=14&size=400x300&sensor=false&key=[API_KEY] bu adresi <img> etiketinde göstermek.
Burada [ENLEM] ve [BOYLAM] zaten Geolocation API tarafından sağlanan değerler, tek ihtiyacımız olan Google'dan bir API_KEY almamız. Onuda buradaki adımları izleyerek alabilirsiniz.
Aşağıdaki örnekte ek olarak lokasyonun işaretlenmesi yapılmıştır, bu özellikler tamamen google maps'in vermiş olduğu özellikler, eğer ilginizi çekiyorsa google maps'in API sayfasına gözatabilirsiniz :)

<button id="button">Konumumu Bul</button>
<div id="result"></div>

<script>
    let button = document.getElementById('button');
    button.onclick = function () {
        if (navigator.geolocation) {
            navigator.geolocation.getCurrentPosition(showPosition);
        } else {
            x.innerHTML = "Geolocation tarayıcınızda desteklenmiyor.";
        }
    };

    function showPosition(position) {
        let result = document.getElementById('result');
        let location = position.coords.latitude + ',' + position.coords.longitude;
        result.innerHTML = `<img src="https://maps.googleapis.com/maps/api/staticmap?center=${location}&zoom=15&size=350x200&language=tr&maptype=roadmap&markers=color:red%7Clabel:BX%7C${location}&key=AIzaSyD1-p2LRZozs7Y-5-pYvh8AMlVSHgeFa9E">`;
    }
</script>

watchPosition() ve clearWatch() Metodları

Cihazın konumu her değiştiğinde anlık olarak konum takibi yapabilmek için watchPosition() metodu kullanılır. Konum paylaşımını sonlandırmak için ise clearWatch() metodu kullanılır. Çalışan bir örneği ise şöyledir;

<button id="start">Konumu Paylaş</button>
<button id="stop">Paylaşımı Durdur</button>
<div id="result"></div>

<script>
    let id;
    let start = document.getElementById('start');
    let stop = document.getElementById('stop');
    let result = document.getElementById('result');

    start.onclick = function () {
        if (navigator.geolocation) {
            navigator.geolocation.watchPosition(showPosition);
        } else {
            result.innerHTML = "Geolocation tarayıcınızda desteklenmiyor.";
        }
    };

    stop.onclick = function () {
        navigator.geolocation.clearWatch(id);
        result.innerHTML = "Konum paylaşımı durduruldu.";
    };

    function showPosition(position) {
        let location = position.coords.latitude + ',' + position.coords.longitude;
        result.innerHTML = `<img src="https://maps.googleapis.com/maps/api/staticmap?center=${location}&zoom=15&size=350x200&language=tr&maptype=roadmap&markers=color:red%7Clabel:BX%7C${location}&key=AIzaSyD1-p2LRZozs7Y-5-pYvh8AMlVSHgeFa9E">`;
    }
</script>