Kardemir Karabükspor Bank Asya 1. Lig'de

Canım memleketim Karabük'ün biricik temsilcisi Kardemir Karabükspor'a Bank Asya 1. Lig'de başarılar dilerim.

Google Map Api - Ders 5 - İşaretçi Eventleri ve Draggable işaretçiler

İşaretçiler üzerinde Event olaylarından bahsedeceğim. Ayrıca bu yazıda dinamik, hareket edebilen işaretçilerden de bahsedeceğim.

Bu özellik de apinin en çok kullanılan özelliklerinden birisi. İşaretçiler üzerinde yapılabilecek event işlemleri:

mousedown,mouseup,click,dragstart,drag,dragend.

Örneğin işaretçiye tıklandığında bir balon içerisinde bize bir mesaj yazılsın. Bunun için GEvent classının statik metodlarından yararlanıyoruz.

GEvent.addListener(busMarker, "click", function() {
// yapilacak islemler
// ...
// ...
}

Eğer işaretçi üzerine tıklarsanız yapılacak işlemler kısmındaki kod parçası çalışacaktır. Önceden dediğimiz gibi bir balon çıkmasını sağlayalım. Bunun için GMap2 classının openInfoWindowHtml metodundan yararlanacağız. Bu metodun parametrelerinin ilki GLatLng objesi, 2. si ise yazılacak mesaj.

var myHtml = <b>&quote Isareci uzerine tikladiniz... Bu bir html mesaji </b>&quote
var latlng = new GLatLng(41,29);
map.openInfoWindowHtml(latlng, myHtml);

Burada dikkat edilmesi gereken openInfoWindowHtml metoduna gönderilen latlang objesinin koordinatlarının marker ile aynı olması gerektiğidir. Eğer aynı olmaz ise siz işaretçiye tıklarsanız başka koordinat üzerinde bulut çıkabilir. Tabi bu yine size ve programınıza bağlı.

Tam bir örnek için : http://afsungur.googlepages.com/map_ornek_6.html

Draggable İşaretçiler
Bu işaretçiler önceden anlatılan statik işaretçiler gibi sabit bir şekilde yer almayabilirler. Kullanıcı isterse bu işaretçileri hareket ettirebilir. Bu hareket sayesinde harita üzerindeki bir çok farklı bölge üzerinde gezinebilir. Buraların koordinatları alınabilir, editlenebilir, veritabanına atılabilir vs. vs.. Bir çok şey yapılabilir. Bunun için ilk olarak işaretçimizin draggable olarak yani suruklenebilir olarak ayarlanmasi gerekiyor.

markeroptions = {draggable: true,icon: greenIcon };
busMarker = new GMarker(center,markeroptions);

şeklinde yeni draggable markerimizi oluşturabiliriz.

Peki draggable işaretçilerin ek özellikleri neler? Örneğin 3 yeni event listener draggable işaretçiler ile kullanılabiliyor.
dragstart,drag,dragend
dragstart -> sürükleme işlemi başladığı anda yapılacak işler
drag -> sürükleme esnasında yapılacak işler
dragend -> sürükleme bırakıldığında yapılacak işler için listener görevi görüyor.

yine GEvent classından yararlanıyoruz:

GEvent.addListener(busMarker,"dragstart",function() {
// surukleme basladiginda yapilacak isler
}

GEvent.addListener(busMarker,"drag",function() {
// surukleme devam ettiginde yapilacak isler
}

GEvent.addListener(busMarker,"dragend",function() {
// surukleme bittiginde yapilacak isler
}

Az sonra verecegim ornekte 2 isaretci olacak. Biri yesil, digeri mavi. Yesili hareket ettirdiginiz surece yesil isaretcinin koordinatlarını bir div bolgesinde goreceksiniz. Maviyi hareket ettirmeye basladiginiz ve suruklemeyi biraktiginiz anda belli bir div bölgesinde mesaj goreceksiniz.

Ornek 7 : http://afsungur.googlepages.com/map_ornek_7.html

Google Map Api - Ders4 - İşaretçinin Koordinatını Alma

Oluşturduğumuz işaretçilerin bazen koordinatlarını alıp işlememiz gerekebilir. Ders 3'teki işaretçimizin koordinatlarını alıp belli değer ile arttırarak yeni işaretçiler oluşturabiliriz. Yaratıcı düşünce size ait, yüzlerce binlerce şey yapabilirsiniz. Önemli olan temel komutları öğrenmek.

var temp = new GLatLng();
temp = busMarker.getLatLng();
enlem_degeri = temp.lat();
boylam_degeri = temp.lng();

Bir koordinat objesi ( GLatLng ) objesi oluşturduktan sonra buna işaretçimizin ( busMarker ) koordinatlarını atıyoruz. Daha sonra GLatLng sınıfının metodları olan lat(), lng() metodlarını temp objesinden çağırıyoruz. Eğer object oriented programlama biliyorsanız bu işleri anlamanız gerçekten çok kolay ! Daha sonra enlem ve boylam degerlerini sırasıyla çekiyoruz.

İşaretçinin konumunu belli bir div bölgesine yazdıran örnek yapalım:

Örnek : http://afsungur.googlepages.com/map_ornek_5.html

Google Map Api - Ders 3 - İşaretçiler

İşaretçiler, harita üzerinde bir koordinatı belirtmek için kullanılan bir simge olarak karşımıza çıkıyor. Örneğin bulunduğunuz evin koordinatını biliyorsanız bu map üzerinde tam evinizin üstüne bir işaretçi koyabilirsiniz. Eğer koordinatları bilmiyorsanız üzülmeyin, ileriki derslerde de bu konuya değineceğiz.

İşaretçileri genel olarak 2 kısma ayırabiliriz. Statik ve dinamik işaretçiler.
Bu derste belirtilen koordinata bir işaretçi eklemeyi göstereceğiz.

İşaretçi oluşturmak için GMarker sınıfından yararlanacağız. Bu sınıfın constructoru genel olarak 2 paremetre alır. İlki oluşacak işaretçinin koordinatı, 2.si ise işaretçinin özellikler ( rengi, büyüklüğü .. )

var busMarker = new GMarker(center,markeroptions);

şeklinde işaretçimizi oluşturabiliriz. Fakat center ve marker options nesnelerini bu kodu çalıştırmadan önce set etmemiz gerekiyor.

center nesnesi bir GLatLng obbjesi. Yani işaretçinin koordinatlarının belirlendiği obje. Harita üzerinde 41,29 noktasına bir işaretçi koymak istediğimizi düşünürsek, center nesnesini şu şekilde oluşturmamız gerekiyor:

var center = new GLatLng(41,29);

Center nesnemizi oluşturduk. Daha sonra markeroptions nesnemizi oluşturmamız gerekiyor. Peki bu nesne de neyin nesi?
Bu nesne işaretçinin özelliklerinin belirlenmesini sağlayan bir nesne. Örneğin işaretçimizin yeşil renkli bir Google Map standart işaretçisi olmasını istiyoruz.

İlk olarak bir icon nesnesi oluşturalım:

var greenIcon = new GIcon(G_DEFAULT_ICON);
greenIcon.image = "http://gmaps-samples.googlecode.com/svn/trunk/markers/green/blank.png";

bu image özelliğinde kullanılan png dosyasının pathini siz kendiniz de değiştirebilirsiniz hiç sorun değil.

icon nesnesinin image özelliğinden başka bir çok özelliği mevcut, mesela iconSize bunlardan birisi. greenIcon.iconSize = ... diyerek iconun büyüküğünü de ayarlamış oluyorsunuz.

greenIcon.shadow = "http://...."; diyerek iconun gölgesinin pathini ayarlayabiliyorsunuz.

iconumuzu oluşturduk diyelim, şimdi sıra geldi markeroptions nesnemizi oluşturmaya:

var markeroptions = {draggable: false,icon: greenIcon };

bu şekilde de markeroptions nesnemizi oluşturabiliyoruz. Bu marker nesnesi draggable özelliği false olduğundan dolayı sürüklenemez bir işaretçi yani statik. Tabi daha bir çok özelliği var bu markeroptions'un..

clickable: true/false
bounceGravity : marker sürüklenip bırakıldığında markerin yere düşme hızı. Adamlar bunu bile düşünmüş ben başka bişi demiyorum :D ( bu arada bu int değeri alıyo - default 1)
title : String


burada bir kaç tanesinden bahsettiğim özellikleri referans sayfasında bulabilirsiniz.

En son olarak da map nesnesine bu ürettiğimiz marker nesnesini harita üzerine konumlandırmasını söylüyoruz :

map.addOverlay(busMarker);

örnek : http://afsungur.googlepages.com/map_ornek_4.html

Gelecek derslerde işaretçilerin derinliklerine doğru inilecek... Bu işin ben zevkli olduğunu düşünüyorum.. İnsanın aklına yüzlerce fikir geliyor bu harita apisini kullandıktan sonra..

Google MAP APi Reference : http://code.google.com/apis/maps/documentation/reference.html

Google Map Api - Ders 2 - Harita Özellikleri

Google Map Api'de harita için kullandığımız Map nesnelerinin bir çok fonksiyonu var. Bunlardan bir kaç tane önemli olanı açıklamakta fayda var.

Örneğin oluşturduğumuz harita nesnesine eklenecek şu 2 metodu inceleyerek, önceki örneğimizle aradaki farkı görelim.

map.addControl(new GLargeMapControl());
map.addControl(new GMapTypeControl());

Bu 2 metod haritaya 2 özellik katıyor. İlki zoom olayını sağlama, bu şekilde zoom ölçüsünü kullanıcı kendi bir slider aracılığı ile belirleyebiliyor. 2. si ise harita özelliğini değiştirebilme imkanını sağlayan metod. Bu sayede haritayı isterseniz yol haritası, isterseniz uydu fotoğrafı veya her ikisini hibritleyerek gösterme imkanına sahip olabiliyorsunuz.

Örnek için : http://afsungur.googlepages.com/map_ornek_2.html

setMapType(type)
removeMapType(type) metodlarını da direk set etmek veya tipi silmek için kullanabilirsiniz.

Bir map nesnesi oluştururken GMap classının constructoruna ek parametreler göndererek harita özelliklerini değiştirebilirsiniz.

         map = new GMap2(document.getElementById("map_canvas"),

            { size:new GSize(800,600),

             draggableCursor:"move",

             draggingCursor:"crosshair"

            }

            );
Örneğin yukarıda GMap2 constructoruna ek parametreler dizisi gönderdik.
size burada harita boyutunu belirtiyor. draggingCursor, haritayı drag ederken ki cursor şeklini belirtiyor.
Diğer özellikleri Google MAP Api reference 'dan edinebilirsiniz.

Örnek 3 : http://afsungur.googlepages.com/map_ornek_3.html 

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

Google Map Api

Bu sene okulumuzdaki bilgisayar projesi için İett Araç Takip sisteminin simülasyonunu gerçekleştirdim. Bunun için hayatımıza anlam katan Google'ın , Map Apisinden yararlanmam kaçınılmaz oldu. Gerçekten adamlar yapmışlar diyorsunuz. Uğraşmışlar, didinmişler bizler için developerlar için apiyi hazırlamışlar. Bir süredir bu api ile uğraşıyordum. Artık öğrendiklerimi paylaşmanın vakti geldi. Basit örnekler ile bu apiden nasıl yararlanacağımızdan projelerimize nasıl entegre edeceğimizden bahsedeceğim.
Görüşmek üzere..