Teknoloji, CBS ve Hayata Dair Herşey
v3 olarak etiketli yazılar
Google Maps JS API V3 – Olaylar (Events)
29 Ağu
http://code.google.com/apis/maps/documentation/v3/events.html
JavaScript de diğer programlama dillerinde olduğu gibi çeşitli olaylar içererek bunlara cevap verip kullanıcı ya da program içerisindeki diğer modüllere ulaşır. Bu olaylar sayesinde programın işleyişi şekillenmektedir. Örneğin haritanın merkezi değiştiğinde şunu yap, ya da şu yaklaşma seviyesinin altına inme gibi şeyleri olaylar yardımıyla yapabilirsiniz.
Yeni versiyonda da V2′deki gibi bir olay sistemi mevcut. Bu versiyonda 2 tip olay bulunmakta :
Kullanıcı Olayları (kullanıcının haritaya tıklaması ya da yaklaşması gibi)
MVC Yapısındaki durum değişiklikleri ile ilgili olaylar
Buradaki MVC (Model-View-Controller) yapısı daha önceki yapıda bahsettiğim Nesne Yönelimli Yapı ile ilgili bir terim. Bunun için biraz Google’dan makale okuyabilirsiniz.
İlgili olayları “google.maps.event” alan adı aldındaki metodlar ile yapabilirsiniz. Bununla ilgili detaylı örneği birazdan vermiş olacağım.
Kullanıcı Olayları :
‘click’ –> ekrana tıklayınca ortaya çıkar.
‘dblclick’ –> ekrana çift tıklayınca ortaya çıkar.
‘mouseover’ –> bir obje üzerine gelince ortaya çıkar.
MVC Durum Değişiklikleri :
Bu tipde haritanın bir özelliği değiştiğinde ortaya çıkabilir. Örneğin haritanın üstünde bir uzaklaşma/yakınlaşma olması durumunda “zoom_changed” olayı ortaya çıkmaktadır.
Harita Olayları :
Harita ile ilgili olayları addListener() metodu ile ekliyoruz. Bu metot 3 parametre almaktadır : sırası ile takip edilecek obje, objenin olayı ve olay sonrası çalışacak fonksiyon/metot. Aşağıdaki örnekte haritanın yaklaşma seviyesinin değişmesi durumunda ne yapacağımızı göreceksiniz.
<script type="text/javascript">
var harita;
function haritayiBaslat() {
var merkezNokta = new google.maps.LatLng(39.918689, 32.801743);
var haritaAyarlari = {
zoom: 9,
center: merkezNokta,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var harita = new google.maps.Map(document.getElementById("harita_div"), haritaAyarlari);
google.maps.event.addListener(harita, ‘zoom_changed’, function () {
alert(‘Haritanın zoom seviyesi değişti!!’);
}
}
</script>
Olaylarda Parametreler :
Bazı olaylar sonucunda ortaya bazı parametrelerde çıkar. Örneğin haritaya tıklanma olayında çalışacak fonksiyona tıklanılan noktanın koordinat bilgileri de gitmektedir. Böylelikle daha interaktif bir geliştirme ortamı sunulmuş olmaktadır. Aşağıdaki örnekte haritayı takibe alıp tıklanıldığında tıklanılan noktanın koordinatları ekranda göstereceğiz.
<script type="text/javascript">
var harita;
function haritayiBaslat() {
var merkezNokta = new google.maps.LatLng(39.918689, 32.801743);
var haritaAyarlari = {
zoom: 9,
center: merkezNokta,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var harita = new google.maps.Map(document.getElementById("harita_div"), haritaAyarlari);
google.maps.event.addListener(harita, ‘click’, function (event) {
alert(‘Noktanın koordinatları : ‘ + event.latLng.lat() + ‘,’ + event.latLng.lng());
});
}
</script>
Olaylar sırasında kullanılabilecek farklı teknikler bulunmakla beraber, bunların en önemlisi kapatma (closure) olarak isimlendirilen JavaScript’te özel (private) kullanımını sağlayan bir yaklaşımdır. Fakat bunu sonraki yazılarımızda daha detaylı olarak işleyeceğiz.
Google Maps JS API V3 – Giriş
28 Ağu
http://code.google.com/apis/maps/documentation/v3/introduction.html
Bu kısımda da Google Maps JS API V3′ün yukarıdaki eğitsel dökümanını takip edeceğiz. Bu dökümanda da örnekle başladığı gibi ben de örnekle başlayacağım.
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true&amp;amp;amp;language=tr"></script>
<script type="text/javascript">
function haritayiBaslat() {
var merkezNokta = new google.maps.LatLng(39.918689, 32.801743);
var haritaAyarlari = {
zoom: 9,
center: merkezNokta,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var harita = new google.maps.Map(document.getElementById("harita_div"), haritaAyarlari);
}
</script>
</head>
<body onload="haritayiBaslat()">
<div id="harita_div" style="width:100%; height:100%"></div>
</body>
</html>
Örnekte yaptıklarımızın üstünden adım adım gidersek :
a) Öncelikle sayfamıza Google Maps JS API’yi eklememiz gerek. Ayrıca bu kısımda mobil cihazlar için daha önceki yazımızda bahsedilen “meta” etiketler ile ayarlarımızı tamamlıyoruz. API’yi kullanırken ileride kullanacağımız GPS için “sensor=true” diyoruz. Ayrıca dil olarak Türkçe kullanacağımızı “language=tr” diyerek tamamlıyoruz.
b) Haritamızın görüntüleneceği alanı belirten “div”i ayarlıyoruz ki burada mobil cihazları düşünerek ekranın tamamını kaplayacağını varsayıyoruz.
c) Haritamızı oluşturmadan önce belli özelliklerini tanımlamamız gerekiyor ki bunu “haritaAyarlari” objesi ile oluşturuyoruz. Eğer JavaScript’teki objeler konusunda eksiğiniz var ise Google’dan bu eksiğinizi gidermenizi tavsiye ederim.
var merkezNokta = new google.maps.LatLng(39.918689, 32.801743);
var haritaAyarlari = {
zoom: 9,
center: merkezNokta,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var haritaAyarlari = {
zoom: 9,
center: merkezNokta,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
V3 ile birlikte öncelikli tanımlı bir harita tipi gelmediği için bu da dahil olmak üzere harita başlangıç merkez noktası ve yaklaşma seviyesini ayarlamanız gerekmektedir. Bunun için öncelikle “google.maps.LatLng” sınıfı ile bir nokta tanımlıyoruz. Bu noktayı (center) da yaklaşma seviyesi (zoom) ve harita tipi (mapTypeId) ile beraber tanımlıyoruz.
Harita tiplerine ise aşağıdaki gibi ulaşılmaktadır. (google.maps.MapTypeId.HARITA_TIPI, buradaki HARITA_TIPI yerine aşağıdaki elemanlar gelmelidir.)
ROADMAP –> Yol haritası
SATELLITE –> Sadece uydu görüntüsü
HYBRID –> Uydu görüntüsü üzerinde yol haritası
TERRAIN –> Yükseklik haritası
d) Bu kısımda harita objemizi oluşturuyoruz. Bunun için haritayı tutan “div”in IDsi ve daha önce tanımlamış olduğumuz harita özellikleri objesi gerekmektedir.
var harita = new google.maps.Map(document.getElementById("harita_div"), haritaAyarlari);
Burada Maps sınıfından “harita” objesini oluşturuyoruz.
e) Artık haritamıza tarayıcımız yüklenince çalışması komutunu verebiliriz.
<body onload="haritayiBaslat()">
Görüldüğü üzere ilk uygulamamızı hazırladık. Uygulama Ankara üstünde standart kontroller ile 9. yaklaşma seviyesinde bir görüntü ile açılacaktır. Siz de enlem ve boylamı değiştirerek kendi istediğiniz bölgeden başlatabilirsiniz.
Google Maps JS API V3 – Konsept
26 Ağu
http://code.google.com/apis/maps/documentation/v3/basics.html
Bu yazı yukarıdaki eğitsel dökümanın Türkçe özeti olarak tanımlanabilir.
Google Maps uzun zamandır kullandığı JS API’ya (v2) yeni bir version (v3) daha ekleyerek daha çok mobil cihazları hedefleyen daha hızlı olan bir güncelleme yaptı.
Bu versiyon ile ilk etapta yüklenen JS dosyasının boyutu düşürülerek “Nesne Tabanlı” bir yapıya geçildi. Bu versiyon ile beraber daha modüler bir yapı tasarlandı. Yazımız boyunca Google Maps JS API V3′ü inceleyerek örnek mobil uygulamalar geliştireceğiz.
Yeni versiyonda ilk göze çarpan yenilik “Anahtar”sız olması. Bildiğiniz üzere önceki versiyonu sitenizde ya da geliştirme ortamınızda kullanmanız için GMail adresiniz ile bir anahtar almanız ve bu anahtarı da sayfanıza eklemeniz gerekmekteydi. Oysa V3 ile beraber bundan kurtuluyoruz.
V3′te JS API’yi sayfanıza aşağıdaki şekilde ekliyorsunuz :
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true">
Buradaki “sensor” parametresi mobil cihazlarınızdaki GPS gibi sensorleri kullanıp kullanmayacağınıza göre değişiyor. Eğer kullanmayacaksanız bile bu değeri “false” diyerek sistemin az da olsa yükünü hafifletebilirsiniz.
Bu versiyonu mobil cihazlarda kullanacağımız için aynı zamanda “div” ayarlarını da ona göre yapmak lazım. En uygun çözüm “div”in genişlik (width) ve yükseklik (height) özelliklerini 100% yapmak. Eğer genel bir uygulama geliştiriyorsak ve bunun aynı zamanda IPhone ve Android cihazlarda da çalışmasını istiyorsak o zaman cihaz tipine göre davranmak en mantıklısı olacaktır. Bu durumda aşağıdaki JS kodunu kullanmak uygun olacaktır.
function tarayiciDenetle() {
var useragent = navigator.userAgent;
var mapdiv = document.getElementById("map_canvas");
if (useragent.indexOf(‘iPhone’) != -1 || useragent.indexOf(‘Android’) != -1 )
{ //eger IPhone ya da Android ise ekrana oturt
mapdiv.style.width = ’100%’;
mapdiv.style.height = ’100%’;
}
else
{ //masaüstü ise de 800*600′lük bir div hazırla.
mapdiv.style.width = ’600px’;
mapdiv.style.height = ’800px’;
}
}
Ayrıca kullanıcının görüntünün boyutunu değiştirmemesi için HTML tarafında da mobil tarayıcıların anlayacağı “meta” etiketleri kullanmamız gerekmektedir. Bunun için sayfanın “head” kısmına
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
eklersek sorun çözülecektir.
Yerelleştirme :
Eğer Türkiye dışında da kullanılacak bir uygulama geliştiriyorsanız, o zaman yerelleştirme de uğraşmanız gereken konular arasında olacaktır. Bu noktada çok detaya girmeden Google’ın bize sunmuş olduğu harita kontrolleri konusundaki yerelleştirmeden bahsedeceğim.
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false&language=tr">
Yukarıdaki kodu kullandığınız takdirde harita Türkçe destekli olarak yayınlanacaktır.
Bu kısım konuya giriş olarak nitelendirilebilir. Bir sonraki kısımda yavaştan uygulama geliştirmeye başlayacağız.
