Mekansal.com

Google Maps JS API V3 - Giriş

Salı, Nisan 27, 2010 15:55

Kategori : Dersler

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;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.


<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;language=tr"></script>

<script type="text/javascript">

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.

<div style="width:100%; height:100%"></div>

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
};

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.

Sosyal Ağlarda Paylaşım :