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