MarkerManager.js

Eğer Google Maps’le uğraşıyorsanız, harita üzerine birden çok imleç koymak ve bunları yönetmek bir noktadan sonra büyük problem olabilmektedir. Çok sayıda imleci kolayca yönetmek için Google’ın yazdığı MarkerManager isimli nesneyi kullanmanızı tavsiye ediyoruz. Dosyaya bu adresten ulaşabilirsiniz. Js dosyasını yükledikten sonra web sayfanızın head kısmına <script type=”text/javascript” src=”markermanager.js”></script> ekleyerek markermanager.js dosyasını projenize dahil edin.

Şimdi diyelim yüzlerce nokta içeren bir xml dosyamız var. Örneğimizde bu dosyadan noktaları çekip harita üzerinde MarkerManager kullanarak göstereceğiz. xml dosyamız aşağıdaki şekilde tanımlanmış olsun;

<markers>
<marker lat=”41″ lon=”29″ name=”Imlec 1″ />
<marker lat=”40″ lon=”29″ name=”Imlec 2″ />
<marker lat=”41″ lon=”30″ name=”Imlec 3″ />
</markers>

Burada sırasıyla lat ve lon değerleri koordinatları belirlerken name değeri ise imlece verdiğimiz bir isimdir. Öncelikle imleci yaratacak bir fonksiyon tanımlayalım;

function createMarker(point, icon) {
var marker = new GMarker(point, icon);
return marker;
}

Burada point değişkenini xml’den alacağımız koordinatlar olarak belirleyeceğiz. icon ise vereceğimiz ikon dosyasını belirtecek. Aşağıdaki fonksiyonda ise imleçleri çekip MarkerManager içine koyma işlemini tamamlıyoruz.

var map = new GMap2(document.getElementById(“map_goster”));
map.addControl(new GLargeMapControl());
//Istanbul’un koordinatına ortala – zoom seviyesi 11
map.setCenter(new GLatLng(41,29), 11);
map.enableDoubleClickZoom();
mgr = new MarkerManager(map);
var testMarkers = [];
GDownloadUrl(“marker.xml”,function(doc) {
// xml parse işlemi
var xmlDoc = GXml.parse(doc);
// marker dizisi oluşturma
var markers = xmlDoc.documentElement.getElementsByTagName(“marker”);
for (var i = 0; i < markers.length; i++) {
// koordinatları çekme
var lat = parseFloat(markers.getAttribute(“lat”));
var lng = parseFloat(markers.getAttribute(“lan”));
// koordinatları koordinat objesine dönüştürme
var point = new GLatLng(lat,lng);
var name = markers.getAttribute(“name”);
var icon = new GIcon();
icon.image = “images/1_kirmizi.png”;
testMarkers.push(createMarker(point,icon));
}
mgr.addMarkers(testMarkers, 9);
mgr.refresh();
});

Burada ilk olarak haritamızla ilgili tanımlamaları yaptık ve MarkerManager’ı haritayla ilişkilendirdik. Daha sonra var testMarkers = []; komutuyla bir dizi yarattık. Daha sonra GDownloadUrl komutuyla xml dosyamızı çağırıp GXml nesnesiyle parse işlemini gerçekleştirdik. Son olarakta createMarker fonksiyonuyla yarattığımız imleçleri testMarkers dizisi içine gömdük. mgr.addMarkers(testMarkers, 9); komutu ise dizi içindeki tüm imleçleri 9 zoom seviyesinden itibaren gösterilmek üzere harita üzerine koyar.

Eğer herhangi bir zamanda imleçleri silmek ve harita üzerindeki imleçleri yeni baştan yaratmak isterseniz yapmanız gereken;
mgr.clear();
mgr.addMarkers(testMarkers, 12);
mgr.refresh();
komutlarını çalıştırmaktır. Bu şekilde harita üzerindeki tüm imleçler silinecek, yerine yeni koyduğunuz imleçler gelecektir. MarkerManager’ın özellikle Ajax çağrılarıyla gelen dinamik imleç verilerinde kullanımı programcıya büyük kolaylıklar sağlamaktadır.
Kaynak