HTML5 ve Google Map ile Yerinizi Bulun

HTML5‘in getirilerini konuşmaya devam ediyoruz.

Bugün geolocation özelliğini tanıyacağız.Geolocation, kullanıcının bulunduğu bölgeyi görebilmemizi sağlayan basit bir kodlama.

An itibariyle güncel tüm browserlar yazılımı çalıştırmakta. Fakat eriştiği bilgilerin kullanıcıya özel olması sebebiyle çalışmadan önce kullanıcıdan izin istenmekte. Onay sonrasında akıllı telefonların GPS mantığıyla X ve Y koordinatlarınızı çözümleyip size rakamsal değerler sunmakta.

ÖRNEĞİ GÖRÜNTÜLE

Nasıl kullanılır?

Kullanımı gayet basit. Dışarıdan herhangi bir JavaScript dosyasına ihtiyacınız olmayacak.

navigator.geolocation.getCurrentPosition(showPosition);

Bütün koordinat bilgilerimiz sadece bir satır ile elimizin altında! Şimdi örneği biraz geliştirelim.

1. Örnek

Geolocation’ı tam olarak tanımanızı sağlayacak basit bir örnek ile başlayalım. İlk olarak listelememizi yapacağımız bir alan hazırlamalıyız. <p>, <span>, <div> her ne istiyorsanız kullanın. Pek bir önemi yok. Ben HTML5 ile merhaba dediğimiz <section> birimini kullanacağım.


<section id="deneme">Koordinatlarınızı listelemek için buttonu tıklayın</section>
<button onclick="bolgeyigoruntule()">Test</button>

Şimdi bolgeyigoruntule isimli JavaScript işlevimizi hazırlayalım.

İlk olarak deneme id’sini verdiğimiz div’i html içerisinde bulalım.

var x=document.getElementById("deneme");

Sonrasında geolocation ile navigasyon bilgilerini çekelim.

function bolgeyigoruntule(){
if (navigator.geolocation){navigator.geolocation.getCurrentPosition(bolgeyigoster);}

Bilgiler şuan elimizde. Ama kullanıcının tarayıcısı bu sistemi desteklemiyorsa ne yapacağız? Hadi küçük bir else döngüsü girelim.

else{x.innerHTML="Geolocation tarayıcınız tarafından desteklenmiyor.";}}

Son bir işlem kaldı. Deneme id’si içerisinde yayınlayacağımız bilgileri düzenleyelim. Basit bir fonksiyon yeterli olacaktır.

function bolgeyigoster(position){
x.innerHTML="Enlem : " + position.coords.latitude + "<br>Boylam : " + position.coords.longitude;}

Ve işlemimiz hazır.

2. Örnek

Az önceki örneğimizi geliştirelim. Bu sefer Google Maps bağlantısıyla bilgileri sıradan enlem ve boylam rakamları olarak değil, harita yayını olarak listeleyelim. Google’ın haritalar desteği için <head></head> içerisine API’yi ekleyelim.

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

Şimdi sonucu göstereceğimiz <section> kodunu ekleyelim.

<section><p>Bölge araştırılıyor : <span id="deneme">taranıyor...</span></p></section>

Ve JavaScript kodlarımızın devamı :

function success(position) {
var s = document.querySelector('#deneme');
if (s.className == 'bulundu') {return;}
s.innerHTML = "Seni bulduk!";
s.className = 'bulundu';

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

document.querySelector('section').appendChild(mapboyut);

var latlng = new google.maps.LatLng(position.coords.latitude, position.coords.longitude);
var myOptions = {zoom: 15,center: latlng,mapTypeControl: true,navigationControlOptions: {style: google.maps.NavigationControlStyle.SMALL}, mapTypeId: google.maps.MapTypeId.ROADMAP};
 var map = new google.maps.Map(document.getElementById("mapboyut"), myOptions);
 var marker = new google.maps.Marker({position: latlng, map: map, title:"İşte buradasın! (Bölgenin "+position.coords.accuracy+" metre çevresindesin)" });}

function error(msg){var s = document.querySelector('#deneme');
s.innerHTML = typeof msg == 'string' ? msg : "başarısız";s.className = 'başarısız';}
if (navigator.geolocation) {navigator.geolocation.getCurrentPosition(success, error);} else {error('desteklenmiyor');}

Kapanış

Geolocation’ın kullanışlı bir yenilik olduğu kuşkusuz. Fakat lokasyon bilgilerinin artık ne kadar kolay takip edilebilir olduğunun da işareti. An itibariyle internet bağlantısı olan en ufak cihazın bile izlenmesi bu derece basit yazılımlarla mevcut. Bu gelişme de akıllara “İnternet ne kadar güvenli? sorusunu getiriyor.

Bu da ilginizi çekebilir Haftanın Ücretsiz Web Teması #20

Bir sonraki HTML5 incelememde görüşmek üzere, hoşça kalın.