İçeriğe geç

JavaScript ile Google Maps Api Kullanarak Sayfadaki Haritaya İşaretleyicisine (Marker) Bilgi Penceresi (Info Window) Ekleme İşlemi

Merhaba arkadaşlar bugün sizlere daha önceki yazımda bahsettiğim JavaScript ile Google Maps Api Kullanarak Sayfadaki Haritaya İşaret (Marker) Ekleme İşlemi sonrasında bu işaretleyiciye bilgi penceresi yani info window nasıl ekleyeceğinizden bahsedeceğim.

Mesela haritada iş yerlerinizi adreslerinizi vs işaretlediniz ve tıkladığınızda burası ile ilgili adres iletişim bilgisi website adresi gibi bilgilerin çıkmasını istiyorsunuz. Bu durumda google maps apinin InfoWindow özelliğini kullanabiliriz.

Daha önceki bahsettiğimiz yazı da Ankara iline bir marker eklemiştik ve bu marker için farklı bir icon tanımlamıştık şimdi işe ona bir info window yani bilgi penceresi ekleyelim.

İlk olarak bu pencerede nasıl bir veri gözükecek onu ayarlamamız lazım burada html olarak bilgiyi gösterebilmekteyiz.

Ankara ile ilgili yukarıdaki gibi bir bilgi hazırladım. Başlık olarak kalın ve ortada olacak şekilde “Ankara” yazacak ve wikipedia üzerinde yazan bir bilgi ekleyip sonundada referans olarakta bilgiyi aldığım web sitesi adresini linkleme işlemini yaptım. Bunların hepsini html olarak hazırlayıp değişkenime ekledim.

Daha sonra info window için bir değişken tanımlıyorum ve google maps apiden oluşturduğum methodunun “content” parametresine göstereceğim içeriği tanımlıyorum.

Bundan sonra yapacağımız işlem ankara için oluşturduğumuz marker tıklanması durumunda bu info window tanımlamamızı açmasını sağlamamız gerekmektedir.

Önceki kod tarafında Ankara için oluşturduğumuz marker değikenine “click” için bir listener ekliyoruz ve bunun fonksiyonunda oluşturuduğumuz ankara detay değişkeninin open methodu ile içine haritayı ve markerı ekleyerek açıyoruz.

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

Bu işlemi sorunsuz bir şekilde tamamladıktan sonra haritamızı açıp marker üzerine tıkladığımız zaman bilgi penceremiz açılacaktır.

Yukarıda da gördüğünüz gibi işlemleri sorunsuz bir şekilde tamamladıktan sonra marker bilgi ekranımız tıklandığı zaman gelmektedir.

Kategori:Javascript - Jquery

3 Yorum

  1. Arif Arif

    lat: 39.925533, lng: 32.866287 Bu Kısmı Adres ile nasıl bulabiliriz bunu merak ediyorum.

Bir yanıt yazın

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