İçeriğe geç

JavaScript ile Google Maps Api Kullanarak Sayfadaki Haritaya İşaret (Marker) Ekleme İşlemi

Merhaba arkadaşlar bugün sizlere Javascript ile google maps api kullanarak haritaya nasıl işaretleyici yani marker ekleme işleminden bahsedeceğim. Daha önce JavaScript ile Google Maps Api Kullanarak Sayfadaki Haritanın Görünümünü Yakınlaştırıp Uzaklaştırma Özelliği konusunu anlatmıştım şimdi o kodlar üzerinden devam edeceğim.

Şimdi haritamıza herhangi bir konum için işaretleyiciyi yani marker nasıl ekleyeceğimizden bahsedeceğim. Bunun için google.maps.Marker servisini kullanmamız gerekmektedir. Burada bu servise işaretlenecek konum için “Laitude” ve “Longitude” konum bilgilerini işaretleme yapılacak harita bilgisini ve fare ile üstüne gelindiğinde çıkacak title bilgisini girmeniz gerekmektedir. Ben örnek olarak Ankara ilimize bir işaretleyici ekleyerek devam edeceğim.

Yukarıda da gördüğünüz gibi “marker” diye bir değişken oluşturarak bu değişkene “position” parametresine lokasyon bilgimizi, “map” parametresine de harita değişkenimizin bilgisini ve en son olarakta “title” bilgisine de yazmak istediğimiz detayı ekledik.

Bunun altermatifi olarak harita setleme işlemini daha sonra da yapabiliriz.

Yukarıda da gördüğünüz gibi harita bilgisini parametre olarak vermedim ama daha sonra haritamda görünebilmesi için marker bilgimizde haritamızı tanımlamamaız gerekmektedir. Ben ilk adımdaki kod ile ilerliyorum ve haritam yüklendiğinde işaretleyicimin de gelmesini istediğim için bunu haritamın yüklenmesini sağlayan “initMap” methodunun içine ekliyoruz.

Son durumda güncel kodumuz aşağıdaki gibi olacaktır.

Bu kodu çalıştırdığımız zaman haritamız ilk yüklendiğinde aşağıdaki gibi görünecektir.

Gördüğünüz gibi marker yani işaretleyicimiz tam Ankara ilinin üstünde ve fare ile üstüne geldiğimizde yazdığımız bilgi görünmektedir.

Siz bu işaretleyiciye ekstra olarak anmimasyonda ekleyebilirsiniz. Bunun için marker servisine “animation” parametresine nasıl bir animasyonla yükleneceği bilgisini girmeniz gerekmektedir.

yukarıda gördüğünüz gibi parametreye yine google maps api tarafından bir değer vermek gerekmektedir. Bu animasyon özelliği için iki tane seçenek vardır. Bunlar:

  • google.maps.Animation.DROP
  • google.maps.Animation.BOUNCE

Bunun dışında birde eklediğiniz marker yani işaretleyicinin fare yardımı ile yerinin değiştirilip değiştirilmeyeceği özelliğini ekleyebilirsiniz. Bu özellik genellikle harita üzerinde konum seçme gibi durumlarda ihtiyaç duyulmaktadır. Bu özellik parametresi belirtilmediği zaman kapalı olarak gelmektedir. Bu özelliği açmak için “draggable” parametresini “true” olarak tanımlamamız gerekmektedir.

Bu özellik kullanım örneğini de yukarıda görebilirsiniz.

Bunların yanı sıra en güzel özelliklerden biride bu marker yani işaretleyici görseli olan iconu değiştiebiliyor olmanız. Bunun için ise marker servisine “icon” parametresini icon url adresini vererek yapılabilmektedir. Eğer bu parametere hiç kullanılmazsa direk olarak yukarıda gördüğünüz gibi default google maps marker iconu gelecektir.

Yukarıdaki icon özelliğini sadece kullandığımız zaman haritamızdaki icon aşağıda görüldüğü gibi değişecektir.

Bu durumda sadece icon değiştirme özelliğini kullanarak yaptığımız google maps api haritamızın son güncel kodu aşağıdaki gibi olacaktır.

Burada marker parametresine isteğe bağlı diğer iki özellikte eklenebilir.

Kategori:Javascript - Jquery

İlk Yorumu Siz Yapın

Bir yanıt yazın

E-posta adresiniz yayınlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir