HTML5 Geolocation Uygulaması

 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

Ş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