HTML5 Geolocation Uygulaması

HTML5 Geolocation HTML5 teknolojisi ile gelen Geolocation  özelliği, tarayıcıdan alınan kullanıcı izni ile, konum tesbiti ve konumu artık çok basit.

GeoLocation API güvenilir web siteleri ile konumunuzu paylaşmanızı sağlar.

Tarayıcınız konum belirleme desteklemiyor ise, mobil cihazınızda GPS ünitesi var ise, Firefox’un eski sürümleri için Firefox’un en yeni sürümü veya bir geolocation  addon kullanabilirsiniz.

navigator.geolocation.getCurrentPosition(showPosition);

Yukarıdaki kod betiğinde yer alan getCurrentPosition ön tanımlı fonksiyon ile, kullanıcının konumu tesbit edebiliyoruz.

Uyumlu tarayıcılar

compatible_iecompatible_operacompatible_safari compatible_chromecompatible_firefox

 

Şimdi kodlara geçelim;

<span id="status">geolocation açılıyor...</span>

<script>
function success(position) {
var s = document.querySelector('#status');

if (s.className == 'success') {
// not sure why we're hitting this twice in FF, I think it's to do with a cached result coming back
return;
}

s.innerHTML = "Güncel konumunuz!";
s.className = 'success';

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

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

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

var marker = new google.maps.Marker({
position: latlng,
map: map,
title:"Buralardasınız! ( "+position.coords.accuracy+" meter radius)"
});
}

function error(msg) {
var x = document.querySelector('#status');
x.innerHTML = typeof msg == 'string' ? msg : "failed";
x.className = 'fail';

switch(error.code){
case error.PERMISSION_DENIED:
x.innerHTML="Kullanıcı Geolocation isteğini reddetti."
break;
case error.POSITION_UNAVAILABLE:
x.innerHTML="Konum bilgileri kullanılamıyor."
break;
case error.TIMEOUT:
x.innerHTML="Kullanıcı yerini almak için yapılan istek zaman aşımına uğradı."
break;
case error.UNKNOWN_ERROR:
x.innerHTML="Bilinmeyen bir hata oluştu."
break;
}

// console.log(arguments);
}

if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(success, error);
} else {
error('not supported');
}
</script>
<div id="mapcanvas"></div>

 

Demo Download

8 thoughts on “HTML5 Geolocation Uygulaması

  • sql e bu konum bilgilerini kayıt etmek ne yapmamız gerekiyor?
    Js ile aram pek iyi değildirde

  • üstad bunu mesela websitemize girenleri görebilirmiyiz peki? yani bir çok yer işareti?

  • hocam bu scriptin içinden bir eşitleme yapabilirim db ye eklemek için fakat enlem boylam hangisi onu bulamıyorum

  • arkadaşlar google chrome tarayıcı konumu izni almadan il ve ilçe gösteriyor. bunu maps api kullanmadan nasıl yapabiliriz? kullanıcının izniyle konum bulunuyor maps api ile. chrome nasıl yapıyor? bilen arkadaş var ise acilen yardımcı olabilirmi?

Bir Cevap Yazın

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