Home > Uncategorized > Google Map Api – Ders 1 – Haritayı Sayfaya Yükleme

Google Map Api – Ders 1 – Haritayı Sayfaya Yükleme

Bunun için ilk olarak Google hesabımız
olması gerekiyor. Ve apiyi kullanabilmemiz için bir key almamız gerekiyor. Bu çok da önemli bir şey değil. Çünkü ben rasgele web sitesi ismi yazarak da bu keyi aldım. Localhostta harita sorunsuz çalışıyor. Fakat yine de gerçek veri yazabiliyor isek yazmak lazım.Aksi takdirde her sayfa açılışında alert alabiliriz.

http://code.google.com/apis/maps/signup.html adresinden keyi alabilirsiniz.

Key aldıktan sonra yapmanız gereken aşağıdaki kodu sayfanızda head tagleri arasına yerleştirmeniz.




<script src="http://maps.google.com/maps?file=api&v=2&key=ABQIAAAAzr2EBOXUKnm_jVnk0OJI7xSosDVG8KKPE1-m51RBrvYughuyMxQ-i1QfUnH94QxWIa6N4U6MouMmBA"

type="text/javascript">

</script>

Daha sonra yapmamız gereken ilk iş haritamızın yerleşecegi div bolgesini ayarlamak.


<div id="map_canvas" style="width: 500px; height: 300px"></div>

yazarak div bölgesini ayarlayabiliyoruz. Bu bölge herhangi bir tablonun gözü olabilir, sayfanın en uç noktası, en başı olabilir bu size kalmış. Daha sonra bu div bölgesine haritayı basmamız gerekiyor. Onun için artık javascript metodumuzu yazmamız gerek.


<script type="text/javascript">



function initialize() {

if (GBrowserIsCompatible()) {

var map = new GMap2(document.getElementById("map_canvas"));

map.setCenter(new GLatLng(41.028, 28.293), 13);

}

}

</script>

Yukarıdaki javascript kodunu head tagleri arasina yerlestiriyoruz. Burada yapılan iş map_canvas div bolgesine haritayı basmak ve harita ilk açıldığında merkez olarak alınacak koordinatın map.setCenter metodu ile belirlenmesi.

GMap Clasına ait olan setCenter metodu görüldüğü gibi GLatLng sınıfına ait bir obje almış. Bu objeyi bir koordinat objesi olarak nitelendirebiliriz.
Kodu su sekilde de yazabilirdik:
GLatLng classının constr. ilk parametresi enlem, 2.si boylam buna dikkat!!!

var a = new GLatLng(41.028,28.903);
map.setCenter(a,13);

Buradaki 13 sayisi ise zoom seviyesini gösteriyor. 1 en düşük değer oluyor, 14 en büyük değer oluyor. Bazı durumlarda 15 de geçerli olabiliyor. Çekilen uydu fotoğrafına göre…

Tabi unutmadan bu initialize metodunun sayfa acilirken hemen yuklenmesini istiyor isek body load kismina su sekilde koymamiz lazim:


<body onload="initialize()" onunload="GUnload()">

Bu sekilde haritamizi sayfamiza yuklemis oluyoruz.

Örnek 1 : http://afsungur.googlepages.com/a.html

Advertisements
Categories: Uncategorized
  1. No comments yet.
  1. No trackbacks yet.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: