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>
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>
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
};
İNDİR
http://yadi.sk/d/_lKHKY029ZPGL
Not: Bu örneği çalışır test edebilmek için sunucu üzerinde deneyin.