Ad o b ew o rd p ress. co m / T a sa rı m U n su rl a rı / HT M L5 / HT M L5 ve G o o g l e M a p i l e Yeri n i zi Bu l u n
HTML5 ve Google Map ile Yerinizi Bulun Vatanay Özbeyli tarafından 03 Temmuz 2013 tarihinde yazıldı. ~ Yorum Yok + Değiştir
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.
Nasıl kullanılır? Kullanımı gayet basit. Dışarıdan herhangi bir JavaScript dosyasına ihtiyacınız olmayacak. 1 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. 1 <section id="deneme">Koordinatlarınızı listelemek
için buttonu tıklayın</section> 2 <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. 1 var x=document.getElementById("deneme"); Sonrasında geolocation ile navigasyon bilgilerini çekelim. 1 function bolgeyigoruntule(){ 2 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. 1 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. 1 function bolgeyigoster(position){ 2 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. 1 <script type="text/javascript" src="http://maps.google.com/maps/api/js? sensor=false"></script> Şimdi sonucu göstereceğimiz <section> kodunu ekleyelim. 1 <section><p>Bölge araştırılıyor : <span id="deneme">taranıyor...</span></p></section> Ve JavaScript kodlarımızın devamı : 1 2 3 4 5 6 7
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');
8 9 10 11 12 13 14
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); 15 var myOptions = {zoom: 15,center: latlng,mapTypeControl: true,navigationControlOptions: {style: google.maps.NavigationControlStyle.SMALL}, mapTypeId: google.maps.MapTypeId.ROADMAP}; 16 var map = new google.maps.Map(document.getElementById("mapboyut"), myOptions); 17 var marker = new google.maps.Marker({position: latlng, map: map, title:"İşte buradasın! (Bölgenin "+position.coords.accuracy+" metre çevresindesin)" });} 18 19 function error(msg){var s = document.querySelector('#deneme'); 20 s.innerHTML = typeof msg == 'string' ? msg : "başarısız";s.className = 'başarısız';} 21 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. Bir sonraki HTML5 incelememde görüşmek üzere, hoşça kalın.
Benzer Konular: HTML5 ile Tam Ekran (Full Screen) HTML5 Video Oynatıcı (Altyazı ve Logolu) CSS ile Mükemmel Twitter Buttonu Görsellerinize Büyüteç ile Bakın CSS ve jQuery Yardımıyla Resimlere Caption
Yaz覺 Kategorisi : HTML5 , Tasar覺m Unsurlar覺 Anahtar Kelimeler : geolocation , GPS , html5 , izleme , koordinat , navigasyon , takip