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

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