Google Maps API v3′te Kendi Kontrollerinizi Oluşturmak-3

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

Son yazımda sizlere Google Maps API’nin standart kontrollerinin nasıl kullanılacağını ve yönetileceğini anlatmıştım. Bu yazımızda kendi kullanıcı kontrollerimizi oluşturacak ve yöneteceğiz. Kontrollerin nasıl yönetildiğini hatırlamak isterseniz bir önceki “Google Maps API v3′te Kontrolleri Yönetmek-2” başlıklı yazıyı okuyabilirsiniz.

Öncelikle bu işlemi nasıl gerçekleştirirken oluşturacağımız kurgunun nasıl olacağından bahsedeyim ve daha sonra bunu adım adım gerçekleştirelim.

1. İlk olarak “Google Maps API v3 Kullanımı-1” başlıklı yazımdaki ilk örneğimizde olduğu gibi standart bir Google Maps haritası oluşturalım.

2. Yine “Google Maps API v3′te Kontrolleri Yönetmek-2” başlıklı yazımdaki örnekte olduğu gibi tüm kullanıcı kontrollerini iptal edelim.

3. Kendi oluşturacağımız kontrolün taşıyıcısı vazifesini görecek taşıyıcı bir DIV’i dinamik olarak oluşturalım.

4. Daha sonra kendi kullanıcı kontrolümüzü dinamik olarak oluşturalım.

5. Oluşturduğumuz bu kontrolü, hazırladığımız taşıyıcı DIV’in içerisine ekleyelim.

6. Artık taşıyıcı DIV’imiz ve hazırlamış olduğumuz kullanıcı kontrolü de hazır olduğuna göre bunu haritamızın istediğimiz yerine ekleyelim.

7. Daha sonra kullanmak üzere bu kontrole bir event yani bir olay işleyici ekleyip bir alert kutusu ile çalışıp çalışmadığını kontrol edelim. Daha sonraki yazılarımızda da bu kontrolümüze gerçekten işe yarayacak bir eylem eklemek için hazır hale getirmiş olalım.

Yol haritamız hazır olduğuna göre artık işin eğlenceli tarafına başlayabiliriz.

Adım-1: Standart bir Google Maps haritası oluşturalım.

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>Google Maps API v3 Örneği</title>
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>
<style type="text/css">
    #mapDiv {width:450px;height:300px;}
</style>
<script type="text/javascript">
    function baslat() {
        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);
    }
</script>
</head>

<body onload="baslat()">
    <div id="mapDiv"></div>
</body>
</html>

Çalışan örneğe buradan göz atabilirsiniz.

Adım-2: Tüm kullanıcı kontrollerini iptal edelim.

Bunun için önceki yazılarımdan da hatırlayacağınız üzere mapOptions‘a disableDefaultUI: true özelliğini vermek yeterli olacak. Bu yüzden yukarıdaki kodun aşağıdaki gibi değiştirelim.

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

Adım-3: Taşıyıcı DIV’imizi oluşturalım.

var containerMenuControl = document.createElement('DIV');
containerMenuControl.style.cssText = "margin-top:5px; overflow: hidden; text-align: center; position: relative; padding: 3px 3px; font-weight: bold; min-width: 100px; min-height:26px;-webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; background-color:#E9EAEE; margin-right:6px; border:1px solid #A3A3A3;-webkit-box-shadow: 2px 2px 0px 0px #CCC; box-shadow: 2px 2px 0px 0px #CCC;"
containerMenuControl.innerHTML = '';

İlk satırda tarayıcının document nesnesine ait createElement metodu ile dinamik olarak bir DIV oluşturduk ve buna containerMenuControl isimli değişkenimize atadık. Bu değişken aslında bir DIV elementi nesnesi.

İkinci satırda web sayfası kodlarken nasıl ki bir DIV etiketine CSS tanımlıyorsak Javascript’teki yazım şekli ile DIV’imizin CSS özelliklerini tanımlıyoruz. Bunun için containerMenuControl.style.cssText kodunu kullanıyoruz. Ben burada kodu çok daha fazla uzatmak istemediğimden dolayı cssText özelliğini kullandım. Bu yazım şekli yerine istenirse tüm CSS özellikleri ayrı ayrı da belirtilebilir.

Üçüncü ve son satırımızda ise oluşturduğumuz containerMenuControl isimli DIV nesnesinin HTML içeriğini boşalttım. Bunu daha sonraki işlemlerde nasıl yapıldığını göstermek maksadı ile örnek olması açısından ekledim. Zira yapacağımız örnek için gerekli değil.

Adım-4: Kendi kullanıcı kontrolümüzü oluşturalım.

imgCoor = document.createElement("IMG");
imgCoor.style.cssText = "cursor:pointer;margin-right:3px;";
imgCoor.id = "imgCoor";
imgCoor.src = "imgCoor.png";
imgCoor.title = "Koordinattan Adres Bul";

İlk satırda bir Resim etiketi oluşturduk. İkinci satırda bu resim üzerinde kullanacağımız CSS özelliklerini belirledik. Üçüncü satırda, kontrolümüzü yönetmemiz için gerekli olan ID tanımlamasını yaptık. Dördüncü satırda oluşturduğumuz resim etiketinin kaynağını yani resim dosyamızı belirledik. Son olarak beşinci satırda da resmimize bir TITLE atadık.

Adım-5: Oluşturduğumuz bu kontrolü, hazırladığımız taşıyıcı DIV’in içerisine ekleyelim.

Adım 2’den beri pek çok kod ekledik ama kodlarımızı birleştirip baktığımızda haritamızda hala bir değişiklik olmadığını göreceksiniz. Bunun sebebi gerekli hazırlıkları yapmış olsak da henüz oluşturduğumuz kontrolleri haritamıza eklemediğimizden kaynaklanıyor.

Bunun için öncelikle aşağıda olduğu gibi oluşturduğumuz imgCoor isimli aracımızı, containerMenuControl isimli DIV’imizin içerisine ekleyelim.

containerMenuControl.appendChild(imgCoor);

Adım-6: Artık taşıyıcı DIV’imiz ve hazırlamış olduğumuz kullanıcı kontrolü de hazır olduğuna göre bunu haritamızın istediğimiz yerine ekleyelim.

Bunu da aşağıdaki kodumuz ile gerçekleştiriyoruz.

map.controls[google.maps.ControlPosition.RIGHT_TOP].push(containerMenuControl);

Bu kod şu anlama geliyor. Kodumda tanımladığım map içerisine (map), belirttiğim konuma (google.maps.ControlPosition.RIGHT_TOP), gösterdiğim nesneyi (containerMenuControl) push et! Yani ekle. Push’un anlamı itelemek ancak burada ekleme kelimesi daha anlamlı.

Örneğimiz çalışır hale gelmiş olmalı. Son adımımızı da tamamlayıp, örneğimizi kontrol edebiliriz.

Adım-7: Kontrolümüze bir event ekleyelim.

Event kullanımını ilerleyen yazılarımda detaylı olarak anlatacağım. Şimdilik yalnızca kısa bir bilgi vereyim. Google Maps API’nin çeşitli olay dinleyicileri bulunuyor. Yani siz haritanıza ya da bir nesneye tıkladığınızda, üzerine geldiğinizde, gittiğinizde, çift tıkladığınızda ve daha pek çok olayı gerçekştirdiğiniz de bu olay dinleyicileri tetiklenir. Biz de aşağıdaki kodumuzdan imgCoor isimli resim nesnemize bir click eventi uygulandığında, alert metodu ile “Merhaba! Ben oluşturduğun kontrolün click eventıyım!” demesini istiyoruz.

google.maps.event.addDomListener(imgCoor, 'click', function() {
       alert("Merhaba! Ben oluşturduğun kontrolün click eventıyım!");
});

Örneğin son haline buradan ulaşabilirsiniz. Örnekte kullanmış olduğum resim de burada.

Bir yazının daha sonuna geldik. Eğlence henüz yeni başlıyor. Bundan sonraki yazılarımda çok daha eğlenceli ve kullanışlı işlemlere başlayacağız. En azından haritamıza görsellik ve işlevselik kazandırmaya başlayacağız. Tavsiyem, Google Maps API ile ilgileniyorsanız mümkün olduğunda bir müfredat programı sıralamasında hazırladığım yazıları sırası ile takip etmeniz.

 

Benzer Yazılar


DeliPenguen'i Google+'da bulun



  1. 9 Ocak 2013 - 20:35

    Hocam selamlar, verdiğin bilgiler çok güzel benim gibi yeni başlayanlara ışık tuttuğu muhakkak, benim bir sorum olacak. Ben bir harita üzerine farklı layerlar getirmek istiyorum, ama hazır google kodları değil, yani nüfus, sıcaklık falan değil, kaldıki türkiye için yok zaten. Mesela İstanbul default geldikten sonra bir butona tıklanınca da aynı harita üzerinde mesela kentsel dönüşüm olan alanları göstermek istiyorum, tekrar tıklayınca gidecek, bir başka buton ile dönüşüm yapılmış alanlar gibi. Yani aslında bir harita ekranı içinde buton tıklamaları ile üst üste başka haritaları getirip göstermek istiyorum, varmıdır bir yolu?

    Kolaylıklar dilerim.

  2. :DeliPenguen
    15 Ocak 2013 - 14:28

    Merhaba @Esat,

    Öncelikle bu yazı Google Maps kullanımı ile alakalı. Dolayısı ile anlatılanlar Google Maps kullanan bir harita üzerinde geçerli. Şöyle ki; kentsel dönüşüm alanları içerisinde bulunan alanların lat-lon bilgilerine sahip olman gerekir. Zira bu bilgiler Google Maps’te yok. Eğer bu bilgiler varsa onları kullanarak bir poligon oluşturup harita üzerinde göstermen ve bu yazının konusu olan kendi oluşturacağın bir kontrol ile bunları bağlaman mümkün.

  3. 2 Şubat 2013 - 18:02

    Cevabınız için teşekkürler, aslında sorunumu kısmen çözdüm. Benim datalarım Earth üzerinde KML olarak hazırdı zaten, sorun bunları bir html sayfa içinde kullanıcı seçimli olarak gösterebilmekte idi, o konuda da yol aldım sadece earth de girilmiş her data maps üzerinde doğru görüntülenmiyor, sanırım bunun içinde sayfaya Earth API sini yüklemem gerekiyormuş, bir den fazla KML yi aynı anda göstermek içinde Network denilen bir bağlantı apisini kullanmak, yöntemleri iyi kötü kavradım ama serde programcılık olmadığı için sıkışıyorum 🙂 diğer taraftan şu anda asıl sorunum bu kml leri çağıracak butonu çalıştırmak, verdiğiniz bilgiler ve yayınlarınız için tekrar teşekkürler, ciddi mesafe almamı sizin sayfanız sağladı.

    • ibrahim
      19 Şubat 2013 - 01:33

      Esat Bey bende aynı tarz bir çalışma hazırlıyorum. bende Solda kml dosyalarını göster/gösterme kutucukları var. projem bitmek üzere. Siz projeyi tamamladınız mı? iyi çalışmalar dilerim.

  4. :DeliPenguen
    5 Şubat 2013 - 21:43

    Faydalı olduğuna çok sevindim. 😉

  5. 10 Nisan 2013 - 13:06

    Hocam http://hesaplabakalim.com/widget/248 bu linkteki gibi haritada seçilen iki yer arasındaki mesafeyi ve yol tarifini nasıl bula biliriz yardımcı olursan sevinirim ayrıca verdiğin bilgiler için teşekkür ederim.

    • :DeliPenguen
      10 Nisan 2013 - 13:57

      Merhaba Ümit, imkan bulduğum bir arada söylediğin tarzda bir uygulama hazırlayıp yayınlamaya çalışacağım. Ancak iş yoğunluğumdan dolayı süresi konusunda bir söz veremiyorum maalesef.

  6. 10 Nisan 2013 - 18:28

    hocam proje ödevim cuma gününe vermem lazım bende araştırıyorum ayrıca o uygulamayı wordpress ile eklenti haline getirmem lazım o yüzden zaman kısıtlı 🙁 olumlu cevabın için teşekkür ederim kolay gelsin.