Google Map Api - Ders 7 - PolyLine Oluşturmak

Bazı durumlarda 2 nokta arasındaki mesafeyi yolu belli etmek amacıyla çizgi çizeriz. Bu bazen 2 nokta ile de sınırlı kalmayabilir. Bir yerden baska bir yere giderken uğranılması gereken yerleri de belirtmek isteyebiliriz. Bu durumlarda apimizin GPolyLine sınıfından yararlanacağız.

Bunun için ilk olarak yapilmasi gereken bir GLatLng arrayi oluşturmak. Bu arrayin elemanlari birer koordinat objesi olacak ve bu arrayın pointerını GPolyLine sınıfının constructoruna parametre olarak göndereceğiz. Örnekte 10 noktalı yani 10 elemanlı bir GLatLng arrayi oluşturulmuş ve bu array GPolyLine sınıfının constructoruna parametre olarak gönderilmiştir.

        var a = new GLatLng(41,29);
        var b = new GLatLng(42,30);
        koordinatlar[0] = a;
        koordinatlar[1] = b;

        polyOptions = {geodesic:true};
        polyLine = new GPolyline(koordinatlar, "#ff0000", 5, 1, polyOptions);   
        map.addOverlay(polyLine);

GPolyLine sınıfının constructoru sırasıyla GLatLng arrayı, polyline çizgisinin rengi, kalınlığı, opaklığı ve çizgi özellikleri olacak şekilde 5 parametre alıyor. Polyoption ise geodesic ve clickable özellikleri var. True veya false değerlerini alabiliyor.

Örnek için :

http://afsungur.googlepages.com/map_ornek_9.html

Google Map Api - Ders 6 - Hareket eden işaretçiler oluşturmak

Belki de bu apinin en çok beğendim özelliği hareket eden işaretçiler oluşturmak. Aslında burada apinin ekstradan herhangi bir özelliğini kullanmayacağız. Sadece programlama mantığımızdan yola çıkarak temel bir kaç javascript özelliği ile hareket edebilen işaretçiler oluşturacağız.

Programımızı yine fonksiyonlara ayiriyoruz. En başta işaretçimizi oluşturduk bunda problem yok.
Şimdi 4 tane metodumuz olacak.

1-) startMarker() : Isaretciyi hareket icin tetikleyecek metod
2-) stopMarker() : Isaretcinin hareketini durduracak metod
3-) moveMarker() : Isaretciyi hareket ettirecek metod
4-) setCoords() : Isaretcinin hareket edecegi koordinatları random olarak oluşturacak metod. Ben random koordinatlar olusturdum, arzu eden buraya elle degerler girip isaretcinin bir yol üzerinde hareket etmesini sağlayabilir. Projemde ben bu sekilde kullanmıstım. Elle degerleri girip aracları belli yol üzerinde hareket ettirebiliyordum.

Javascript'te timer olaylarını biraz bilmek gerekiyor. startMarker metodunda yer alacak aşağıdaki kod , speedInterval milisaniye sonra moveMarker metodunun çalıştıracağını belirtiyor.

function startMarker()
{
 timerID = setTimeout("moveMarker()", speedInterval);
}

Peki movemarket metodunda ne yapiliyor? Random olarak urettigimiz koordinatlara işaretçinin yönlendirilmesi yapiliyyor:

function moveMarker()
{
  coordObj = new GLatLng(coordY[coordSayac],coordX[coordSayac]); 
  busMarker.setLatLng(coordObj); 
  coordSayac++;
  timerID = setTimeout("moveMarker()", speedInterval);
}

Fonksyionun ilk satirinda random degerler ile doldurdugumuz coordY ve coordX arraylarindan ilgili indexteki degerler ile bir koordinat objesi oluşturuluyor ( coordObj ). Daha sonra işaretçi buraya yönlendiriliyor ( busMarker.setLatLng ). Daha sonra index değeri bir arttırılıp, aynı metod speedInterval milisaniye sonra tekrar çağırılıyor.

Örneğin tamamı için:

http://afsungur.googlepages.com/map_ornek_8.html

İnnovasyon Nedir, ne işe yarar?

TEB'in innovasyon ile ilgili hazırlamış olduğu güzel bir sunum:

Burada

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