Google Maps API’a Giriş
Cuma, Ocak 2, 2009 11:582005 yılında Google’ın Google Maps web uygulamasını hayata geçirmesi ile web tabanlı Coğrafi Bilgi Sistemleri ve GeoWeb yeni bir döneme girdi. Sonrasında ise Google Maps’in API’sini (Uygulama Geliştirme Arayüzü) internete açması ile bu servisi herkes kendi uygulaması içerisinde kullanmaya başladı.
Bu yazım bünyesinde popüleritesi yüksek olan bu servisin nasıl kullanılacağı konusuna bir giriş yapmış olacağız. Bu yazı kapsamında Google Maps API’sini JavaScript ile kullanacağımızdan dolayı okuyucuların temel JavaScript bilgisine sahip oldukları kabul edilmektedir.
Google Maps API’ye başlamak için öncelikle
http://code.google.com/apis/maps/signup.html
adresine girip uygulamayı web sitemizde kullanmak için bir anahtar almamız gerekiyor. Bu sayfaya Google (ya da Gmail) hesabınız ile giriş yaparak sitenizin adresini belirtip anahtarınızı (Google Maps API key) alıyorsunuz. Anahtarı aldığınız sayfada anahtarla beraber size bir de basit örnek verilmekte. Bu yazı kapsamında da bu örnek üzerinden gidip uygulamaya giriş yapacağız.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<title>Google Maps JavaScript API Example</title>
<script src="http://maps.google.com/maps?file=api&amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;v=2&amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;key=ABQIAAAAKs6JW4uyuutf545UEdq232hQEUogHGXSWubJ8QB09KBm1yNNMONBTryNTqZCAtQWERcKjxFclCWzxcUIO" type="text/javascript"></script>
<script type="text/javascript">
//<![CDATA[
function load() {
if (GBrowserIsCompatible()) {
var map = new GMap2(document.getElementById("map"));
map.setCenter(new GLatLng(37.4419, -122.1419), 13);
}
}
//]]>
</script>
</head>
<body onload="load()" onunload="GUnload()">
<div id="map" style="width:500px;height:300px"></div>
</body>
</html>
Yukarıdaki örneği kopyalayıp notepad içerisine yapıştırın ve dosya ismini index.html (yada uzantısı .htm - .html olacak şekilde istediğiniz bir isimle) kaydedin. Artık bu dosya üzerinde bir web sunucusuna bile ihtiyacınız olmadan çalışabilirsiniz. Sadece dosyanın üzerine çift tıklayarak Internet Explorer ya da Firefox gibi tarayıcılar üstünde yazdığınız kodları web sunucusuna gerek kalmadan çalıştırabilirsiniz. Ayrıca kodu web sunucusunda çalıştırmadığınız için anahtar almanıza da gerek yoktur. (kodunuzu sunucuda çalıştırmak istediğinizde localhost‘ta bile çalıştırsanız anahtara ihtiyacınız olacaktır.)
Genel olarak kodun içeriğine bakacak olursak, öncelikli olarak haritanın gösterileceği yeri belirtmemiz gerekiyor. Yukarıda açık mavi ile gösterilen
<div id="map" style="width:500px;height:300px"></div>
html kodu ile haritamızın adını (map) ve boyutlarını belirliyoruz. Eğer daha büyük bir harita istiyorsunuz buradaki sayılar ile oynamanız yeterli olacaktır.
Harita tanımlamasından sonra html dosyasının “head” kısmına aşağıdaki kodu ekliyoruz.
<script src="http://maps.google.com/maps?file=api&amp;amp;amp;amp;amp;amp;amp;amp;amp;v=2&amp;amp;amp;amp;amp;amp;amp;amp;amp;key=aldiginiz_anahtar" type="text/javascript"></script>
Bu kod ile Google Maps API’yi dosyamıza eklemiş oluyoruz. Burada dikkat edilmesi ereken en önemli yer ise “key=….” kısmıdır. Burada daha önce belirttiğimiz sayfadan aldığınız anahtarı eklemeniz gerekmektedir.
Buraya kadar anlatılanları yaptıktan sonra JavaScript kodunu yazmamıza sıra geldi. JavaScript için etiketlerini uygun bir şekilde ekledikten sonra “load()” isminde bir fonksiyon tanımlıyoruz. Bu fonksiyonun içerisinde öncelikle çalışan tarayıcının Google Maps API ile uyumlu olup olmadığını kontrol eden bir “if” kontrolünü aşağıdaki şekilde ekliyoruz.
if (GBrowserIsCompatible()) {
....
//tarayıcı uyumlu ise çalışacak kodlar
....
}
Eğer tarayıcımız Google Maps API ile uyumlu ise haritayı oluşturmak öncelikli olarak bir GMap2 sınıfından bir obje oluşturmamız gerekmektedir. Bunu da
var map = new GMap2(document.getElementById("map"));
kod parçacığı ile yapacağız. Burada dikkat edilmesi gereken 2 nokta var. Bunlardan birincisi yukarıda oluşturduğumuz haritanın gösterileceği bölmenin (<div>) adını (=map) buraya girdi olarak vermemiz. Bir diğer nokta ise JavaScript tarafında oluşturduğumuz “map” objesini lokal ya da global tanımlanmış olması. Lokal ya da global tanımlanma olaylarını sonraki JavaScript derslerinde bulabilirsiniz.
Bu işlemlerden sonra haritamız kullanıma hazır ama haritayı belli bir noktadan ve ölçek seviyesinden başlatmamız gerekmekte, bu nedenle
map.setCenter(new GLatLng(37.4419, -122.1419), 13);
gibi bir komutu çalıştırıp, haritanın enlem olarak 37.4419 boylam olarak da -122.1419 noktasında ve 13. ölçek seviyesinde başlamasını sağlıyoruz. Buradaki enlem-boylam ve ölçek kavramlarına sonraki derslerde daha detaylı olarak anlatacağız.
Bütün bu aşamalardan sonra çalışan kodumuzun çıktısı aşağıdaki gibi olacaktır. Bu yazıda da görüldüğü üzere az da olsa bir JavaScript bilgisi ile Google Maps API üstünde çalışmak sorun olmayacaktır. Bu yazı sadece bir giriş amacı taşıdığı için Google Maps ile ilgili diğer detaylara ilerleyen zamanlardaki yazılarımızdan ulaşabilirsiniz.
Erhan Dedeman says:
Temmuz 25th, 2009 at 14:54
Kardeş biraz daha hızlı olsan da şu yazının devamını getirsen ne kadar güzel olacak.. Sabırsızlıkla bekliyoruz.. Süper anlatmışsın devamını da anlatırsan harbiden güzel bir harita yapmayı başaracağımıza inanıyorum.. Hadi kardeş biraz zaman ayır da şu işe yaz :))