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 :
[code lang=”html4strict”]
[/code]
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.
[code lang="html4strict"]
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';
}
}
[/code]
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
[code lang="html4strict"]
[/code]
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.
[code lang="html4strict"]
[/code]
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.