Geolocation Kullanımı [HTML5] [Google Maps Örneği ile]

Geolocation Kullanımı [HTML5] [Google Maps Örneği ile]

Geolocation ile bulunduğunuz yerin konumunu alabiliyorsunuz. Böylece en basitinden herhangi bir harita servisi ile bulunduğunuz yeri doğrudan haritada görüntüleyebilirsiniz. Öncelikle bunun çalışma mantığını anlayalım, daha sonra ise google maps ile entegreli bir örnek hazırlayalım sizinle.Geolocation ile bulunduğunuz yerin konumunu alabiliyorsunuz. Böylece en basitinden herhangi bir harita servisi ile bulunduğunuz yeri doğrudan haritada görüntüleyebilirsiniz. Öncelikle bunun çalışma mantığını anlayalım, daha sonra ise google maps ile entegreli bir örnek hazırlayalım sizinle.

İlk olarak tarayıcının bu özelliği destekleyip desteklemediğini şu şekilde anlıyoruz;

if ( navigator.geolocation ){
    // sorun yok devam edebiliriz..
} else {
    // özellik desteklenmiyor
}

Eğer destekliyorsa buradan devam ediyoruz. Ve konumumuzu almak için işlemi başlatıyoruz, zaten bunu yaparken kullanıcı izin vermediği taktirde konumunu alamıyoruz.

navigator.geolocation.getCurrentPosition(function(pos){
     alert("Enlem: " + pos.coords.latitude + "\nBoylam:" + pos.coords.longitude);
});

Sonuç olarak kodlarımızın son hali şöyle olmalı;

if ( navigator.geolocation ){
	navigator.geolocation.getCurrentPosition(function(pos){
		alert("Enlem: " + pos.coords.latitude + "\nBoylam:" + pos.coords.longitude);
	});
} else {
	alert('Tarayıcınız bu özelliği desteklemiyor.');
}

Bunu bir fonksiyon içerisine alalım, işin içine hiç jquery katmadan bir butona bastığımızda çalıştıralım.

function getCoords(){
	if ( navigator.geolocation ){
		navigator.geolocation.getCurrentPosition(function(pos){
			alert("Enlem: " + pos.coords.latitude + "\nBoylam:" + pos.coords.longitude);
		});
	} else {
		alert('Tarayıcınız bu özelliği desteklemiyor.');
	}
}

Ve bir buton oluşturup, onclick içerisinde bu fonksiyonu tanımlayalım.

<button onclick="getCoords()">Koordinatları Getir</button>

Test ettiğinizde sonuç şöyle olmalı;

Geolocation Kullanımı [HTML5] [Google Maps Örneği ile]

Geolocation Kullanımı [HTML5] [Google Maps Örneği ile]

Google Maps ile Bulunduğumz Yeri Haritada Göstermek

Evet artık enlem ve boylam değerlerine sahibiz.. Şimdi bu değerleri kullanarak google maps ile bulunduğumuz yeri haritada gösterelim.

İlk olarak yine mevcut script kodlarımızı yazıyoruz.. Ancak bu sefer enlem ve boylam değerlerini değişkenlere aktaralım;

function getMapCoords(){
	
	if ( navigator.geolocation ){
		
		navigator.geolocation.getCurrentPosition(function(pos){
			
			var enlem = pos.coords.latitude,
				boylam = pos.coords.longitude;
			
			// harita kodları buraya gelecek
			
		});

	} else {
		alert('Tarayıcınız bu özelliği desteklemiyor.');
	}
	
}

Evet şimdi sıra geldi harita kodlarımıza.. İlk olarak harita ayarlarımızı yapalım;

var haritaAyarlari = {
	center: new google.maps.LatLng (enlem, boylam),
	zoom: 15
};

Burada zoom değeri ne kadar çok olursa o kadar yakınlaşacaktır. enlem ve boylam değerlerinide LatLng() metodu içerisinde belirttik.

Şimdi harita id’li nesnemizi gösterelim ve daha sonra haritayı içerisine gömelim.
(Bu nereden geldi diyebilirsiniz 🙂 Birazdan html oluşturduğumuzda id’si harita olan ve genişlik yükseklik değerleri belirlenmiş bir nesne oluşturacağız)

document.getElementById("harita").style.display = 'block';
var harita = new google.maps.Map(document.getElementById("harita"), haritaAyarlari);

Ve son olarak bulunduğumuz yeri haritada işaretleyelim 🙂

/**
 * Bulunduğumuz Yeri İşaretleyelim
 */
new google.maps.Marker({
	position: harita.getCenter(),
	map: harita,
	title: 'Sen Buradasın!'
});

Evet şimdi son olarak google maps’in script dosyasını dahil etmemiz gerekiyor;

<script src="http://maps.googleapis.com/maps/api/js?key=AIzaSyDY0kkJiTPVd2U7aTOAwhc9ySH6oHxOIYM&sensor=false"></script>

Siz burada kendi key’iniz kullanmak isterseniz buradan google hesabınızla giriş yapın ve google maps 3’ü aktif edin. Daha sonra oradan create project deyip gerekli key’leriniz alın ve kendinizinkini kullanın 🙂

Yapamayanlar olursa ing. anlatımı: http://www.w3schools.com/googleAPI/google_maps_api_key.asp

Neyse efendim, son olarak kodlarımız şöyle olmalı;

<!DOCTYPE HTML>
<html lang="en-US">
<head>

	<meta charset="UTF-8">
	<title>Erbilen.NET</title>
	
	<script src="http://maps.googleapis.com/maps/api/js?key=AIzaSyDY0kkJiTPVd2U7aTOAwhc9ySH6oHxOIYM&sensor=false"></script>
	<script type="text/javascript">
	function getMapCoords(){
		
		if ( navigator.geolocation ){
			
			navigator.geolocation.getCurrentPosition(function(pos){
				
				var enlem = pos.coords.latitude,
					boylam = pos.coords.longitude;
				
				/**
				 * Harita Ayarları
				 */
				var haritaAyarlari = {
					center: new google.maps.LatLng (enlem, boylam),
					zoom: 15
				};
				document.getElementById("harita").style.display = 'block';
				var harita = new google.maps.Map(document.getElementById("harita"), haritaAyarlari);
				
				/**
				 * Bulunduğumuz Yeri İşaretleyelim
				 */
				var marker = new google.maps.Marker({
					position: harita.getCenter(),
					map: harita,
					title: 'Sen Buradasın!'
				});
				
			});

		} else {
			alert('Tarayıcınız bu özelliği desteklemiyor.');
		}
		
	}
	</script>
	
</head>
<body>

<div id="harita" style="display: none; width: 500px; height: 300px; background: #eee"></div>
<button onclick="getMapCoords()">Haritada Yerimi Bul</button>

</body>
</html>

Evet, sonuç ise aşağıdaki gibi olmalı 🙂

Geolocation Kullanımı [HTML5] [Google Maps Örneği ile]

Not: Şuan Antalya’da olduğum için doğru yeri buldu 🙂

Harita Tipini Belirlemek

Şuan çizim şeklinde gözüküyor harita.. Bunu uydu görünümüne getirebiliriz. O zaman kodlarımızda harita ayarlarını şöyle değiştirmemiz gerekecek sadece;

var haritaAyarlari = {
	center: new google.maps.LatLng (enlem, boylam),
	zoom: 19,
	mapTypeId: google.maps.MapTypeId.SATELLITE
};

DEMOLAR

http://www.erbilen.net/demo/geolocation/test.html
http://www.erbilen.net/demo/geolocation/map.html
http://www.erbilen.net/demo/geolocation/map2.html

İNDİR

http://yadi.sk/d/_lKHKY029ZPGL

Not: Bu örneği çalışır test edebilmek için sunucu üzerinde deneyin.

Yayınlayan

Tayfun Erbilen

2009’dan beri web işleriyle uğraşan, aynı zamanda amatör müziklede ilgilenen sıradan birisi..

“Geolocation Kullanımı [HTML5] [Google Maps Örneği ile]” üzerine 8 yorum

  1. Keşke tam yerimi bulabilse google 😀 Güzel ders olmuş teşekkürler 🙂

  2. laptopta gps olmamasına rağmen tam konumumu bulabiliyor bu nasıl oluyor bi fikriniz varmı ? 😀

  3. güzel bi çalışma olmus teşekkürler ama keşke yerimi de bulabilseydi 🙂

  4. her yerde butona basıldığında konum bulma anlatılmış, ancak kullanıcı giriş yaptığında butona tıklamadan otomatik olarak nasıl konum alınacağını kimse yazmamış. document ready function ile denedim ancak bir sonuca ulaşamadım. Kullanıcı ilgili sayfaya girdiğinde konumunu otomatik olarak nasıl alabiliriz bilgisi olan var mı acaba?

Bir Cevap Yazın

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