Google Maps API v3’te Katmanlar – Markers – 4

19 Kasım 2012
Bu yazıyı beğendiysen paylaşmayı unutma :)
Pin It

Google Maps API hakkında üç yazıyı geride bırakırken artık biraz daha detaylara inmenin vakti geldi. Bu yazımda haritaların üzerinde kullanabileceğimiz Overlays adı da verilen katmanlara giriş yapacağız.

Yazımız boyunca katmanları 4 ana başlıkta inceleyeceğiz. Şimdi kısaca bu başlıklara bakalım.

1. Markers: Harita üzerinden tek bir noktayı belirten simgelerdir. Google Maps haritası üzerinde varsayılan olarak kırmızı bir simge ile gösterilirler. Marker’ların kullandığı ikonlar özelleştirilebilir yapıdadır.

2. Polylines: Harita üzerinde birden fazla noktayı bir güzergah gibi belirtmek istediğinizde kullanılan katmanlardır ve düz çizgiler halinde oluşturulur.

3. Polygons: Polyline’lara benziyor olsalar da, Polyline’lardan farklı olarak birleştirilerek bir alan ifade eder.

4. Info Windows: Harita üzerinde bilgi balonları oluşturmanızı sağlayan katmanlardır. Balon içerikleri düz metin, resim ya da her ikisinden de oluşabilir.

Bunların dışında önceki yazılarımda anlatmış olduğum ROADMAP, SATELLITE, HYBRID ve TERRAIN‘den oluşan harita tipleri ve yine “Google Maps API v3′te Kendi Kontrollerinizi Oluşturmak-3” başlıklı yazımda anlattığım kendi kontrolleriniz de Overlays/Katmanlar başlığı altına dahil edilebilir. Zira Overlays kelimesi Google Maps’te tam olarak harita üzerinde kullandığınız katmanlar anlamına geliyor.

Şimdi tanım olarak baktığımız bu 4 başlık içerisinde Marker’ları yakından inceleyelim.

Haritaya marker nasıl eklenir?

Şimdi gelin haritamızın üzerine ilk markerımızı ekleyelim. Bunun için aşağıdaki gibi ilk yazımda hazırlamış olduğum haritanın en temel halini kullanalım.

var konum = new google.maps.LatLng(41.033787, 28.649889);
var mapOptions = {
     zoom: 12,
     center: konum,
     mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("mapDiv"), mapOptions);

Şimdi bu kodumuza ek olarak aşağıdaki kodları ekleyelim.

var marker = new google.maps.Marker({
    position: myLatlng,
    title:"Merhaba! Beni görüyorsan markerın üzerine gelmişsin demektir!"
});

MVCObject sınıfından extend edilen google.maps.Marker sınıfı kullanılarak oluşturulan marker nesnesi, aynen map ve mapOptions ikilisinde olduğu gibi MarkerOptions nesnesine sahiptir. Örneğin yukarıdaki kodumuzdaki “position” ve “title“, MarkerOptions’a ait özelliklerdir. Tabi bu özellikler bunlarla sınırlı değil. Diğer özelliklerin tümüne aşağıdaki referans sayfası linklerinden göz atabilirsiniz. Biz de bu özellikleri gerektikçe uygulamalarımızda kullanacağız. Yazımızın sonuna doğru bir kaç özelliğe daha göz atacağız.

Yeni kodu denediyseniz markerın halen haritada gözükmediğini fark ettiniz değil mi? Çünkü henüz oluşturduğumuz haritaya set etmedik. Bunun için kodumuzun devamında marker nesnesinin setMap özelliğini kullanarak, oluşturduğumuz markerı haritamızın üzerine ekleyeceğiz.

marker.setMap(map);

Böylece kodumuzun son hali de aşağıdaki gibi oluşacak.

var konum = new google.maps.LatLng(41.033787, 28.649889);
var mapOptions = {
    zoom: 12,
    center: konum,
    mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("mapDiv"), mapOptions);

var marker = new google.maps.Marker({
    position: konum,
    title:"Merhaba! Beni görüyorsan markerın üzerine gelmişsin demektir!"
});

marker.setMap(map);

Çalışan örneğe buradan bakabilirsiniz.

Bu yazım şekline alternatif olarak setMap kullanmadan da bu işlemi gerçekleştirebiliriz. Yapmamız gereken tek şey MarkerOptions içerine bunu özellik olarak eklemek. Bunun için kodumuzu şu şekilde değiştirebiliriz.

var konum = new google.maps.LatLng(41.033787, 28.649889);
var mapOptions = {
    zoom: 12,
    center: konum,
    mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("mapDiv"), mapOptions);

var marker = new google.maps.Marker({
    position: konum,
    map:map,
    title:"Merhaba! Beni görüyorsan markerın üzerine gelmişsin demektir!"
});

İkinci yazım şeklimize göre de uygulamamızı çalıştırdığımızda aynı görüntüyü elde ediriz.

Çalışan örneğe buradan bakabilirsiniz.

İlgili Maps API Referansı – Marker:
https://developers.google.com/maps/documentation/javascript/3.exp/reference#Marker

İlgili Maps API Referansı – MarkerOptions:
https://developers.google.com/maps/documentation/javascript/3.exp/reference#MarkerOptions

Haritaya birden fazla marker dinamik olarak nasıl eklenir?

Yukarıda yapmış olduğumuz örneklerde marker’ımıza belirli bir konum vererek haritamız üzerine ekledik. Peki haritamız üzerine birden fazla marker’ı dinamik olarak eklemek istersek bunu nasıl yapacağız? Bunun için örneğimizde biraz değişiklik yaparak bunu nasıl gerçekleştireceğimize bir göz atalım.

baslat” isimli fonksiyonumuzun içeriğini aşağıdaki gibi düzenleyelim.

var konum = new google.maps.LatLng(41.033787, 28.649889);
var mapOptions = {
    zoom: 12,
    center: konum,
    mapTypeId: google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(document.getElementById("mapDiv"), mapOptions);

google.maps.event.addListener(map, 'click', function(event) {
    addMarker(event.latLng);
});

Dikkat edecek olursanız kodumuzun içeriğine ek olarak  “google.maps.event.addListener” kodunu ekledik. “addListener” event’ı ya da olay işleyicisi harita üzerinde yapacağınız olaylara karşı bir dinleyici vazifesi üstlenir. Google Maps JavaScript API olay modeli ile ilgili detaylar ilerideki yazılarımızda gireceğiz. Ancak şimdilik kısaca şöyle tanıyalım.

addDomListener(instance:Object, eventName:string, handler:Function)

addListener” ın temel kullanımı yukarıdaki gibidir. İlk parametre olarak olay işleyicinin hangi nesneyi kullanacağı, olay adı ve ilgili fonksiyonu belirtilerek yazılır. Şimdi eklediğimiz kodun ne işe yaradığına daha yakından bakalım.

google.maps.event.addListener(map, 'click', function(event)

Kodumuzu daha anlamlı ifade edecek olursak şu anlama geliyor. “map“ üzerine “click” olayı uygulandığında bunu dinle ve fonksiyon içerisinde belirttiklerimi uygula! Buna göre haritanın üzerine tıklandığında “addMarker(event.latLng)” kodu işleyecek ve haritamız buna göre çalışacaktır.

addMarker”, örneğimiz için benim hazırladığım bir fonksiyon. Bu fonksiyona parametre olarak “map“ üzerine “click” olayı uygulandığında latitude ve longitude değerlerini alan “LatLng” özelliği ile bir değer gönderiyoruz.

İlgili Maps API Referansı – LatLng:
https://developers.google.com/maps/documentation/javascript/reference#LatLng

addMarker” fonksiyonumuzu da şu şekilde oluşturduk. Fark ettiğiniz üzere aslında “addMarker” fonksiyonu statik olarak marker ekleme kodumuzu birebir aynısı. Tek farklılık, “position” değeri sabit değil. Yaptığımız fonksiyonun farklılığı, “map“ üzerine “click” olayı uygulandığında tıklanan konumun alınarak, bu konuma göre marker eklenmesi esasına göre çalışıyor olmasından kaynaklanıyor. Böylece harita üzerine her tıkladığımızda artık marker ekleye bileceğiz.

function addMarker(latlng){
    marker = new google.maps.Marker({
        position: latlng,
        map: map
    });
}

Buna göre kodumuzun son hali aşağıdaki gibi oluşacaktır.

var marker;
var map;
function baslat() {
    var konum = new google.maps.LatLng(41.033787, 28.649889);
    var mapOptions = {
        zoom: 12,
        center: konum,
        mapTypeId: google.maps.MapTypeId.ROADMAP
    };
    map = new google.maps.Map(document.getElementById("mapDiv"), mapOptions);

    google.maps.event.addListener(map, 'click', function(event) {
        addMarker(event.latLng);
    });
}

function addMarker(latlng){
    marker = new google.maps.Marker({
        position: latlng,
        map: map
    });
}

Çalışan örneğe buradan bakabilirsiniz.

Şimdi başta anlattığımız MarkerOptions‘ın özelliklerinden bir kaçına daha göz atalım ve son örneğimiz üzerinden devam edelim.

Animations: Harita üzerinde kullandığımız marker’lara 2 çeşit animasyon ekleyebiliyoruz. Bunlar BOUNCE ve DROP. İki farklı yazım şeklinde bu animasyonları kullanabiliriz. Bunun için addMarker fonksiyonumuzda aşağıdaki eklemeyi yapalım.

Birinci kullanım şekli;

function addMarker(latlng){
    marker = new google.maps.Marker({
        position: latlng,
        map: map,
        animation: google.maps.Animation.DROP
    });
}

– Birinci kullanım şekli ile DROP animasyonu örneği için tıklayın.
– Birinci kullanım şekli ile BOUNCE animasyonu örneği için tıklayın.

İkinci kullanım şekli;

function addMarker(latlng){
    marker = new google.maps.Marker({
        position: latlng,
        map: map
    });
    marker.setAnimation(google.maps.Animation.DROP);
}

– İkinci kullanım şekli ile DROP animasyonu örneği için tıklayın.
– İkinci kullanım şekli ile BOUNCE animasyonu örneği için tıklayın.

İlgili Maps API Referansı – Animation:
https://developers.google.com/maps/documentation/javascript/reference#Animation

Marker ikonunu özelleştirme: Google Maps’in varsayılan olarak sağladığı marker ikonunu kullanmak zorunda değilsiniz. Farklı ikonları projenize dahil etme imkanına sahipsiniz. Bunun için aşağıdaki yazım şeklini kullanmanız yeterli.

function addMarker(latlng){
    marker = new google.maps.Marker({
        position: latlng,
        map: map,
        icon: 'Map-Marker-Example.png'
    });
}

Çalışan örneğe buradan bakabilirsiniz.

Bu örneğimizle yazımızın sonuna geldik. Yazımın başında bahsettiğim 4 katmanın ilkini bu yazıda detaylı şekilde inceledik. Bir dahaki yazıda Polyline’ları inceleyeceğiz.

Benzer Yazılar


DeliPenguen'i Google+'da bulun



  1. 18 Nisan 2013 - 14:53

    Hocam google maps yazılarınız çok iyi ve güzel anlatılmış.
    Bir çok kişiye yardımı dokunmuştur, google maps üzerine paylaşımlarınız devam etmesini diliyorum.

  2. :DeliPenguen
    19 Nisan 2013 - 14:52

    Çok teşekkürler Sinan, beğendiğine sevindim. Fırsat bulduğum ilk arada kaldığım yerden yazmaya devam edeceğim.

  3. Halil Savacı
    5 Mayıs 2016 - 22:17

    Yazınızdan çok faydalandım çok güzel bir yazı olmuş elinize aklınıza sağlık. Çok teşekkür ediyorum. delipenguen.com aklıma kazındı 😀

1Geri İzlemeler