Merhaba arkadaşlar bu Google Map JavaScript Api kullanımına devam ediyorum.
Gerekliler
1) jQuery
2) Önceki makalede anlattığım üzere Kopyaladığımız API KEY Kopyalamadıysan Credentials altında API Key'i alabilirsiniz.
Sayfamınız head kısmına önce jQuery sonra google map javascript api kütüphanemizi api key ile beraber ekliyoruz.
zoom: 0-19 arası değer alır
center: Harita ilk açıldığında nereye odaklanması gerektiğini belirtir.
Harita için MAP ID'li bir div açıyoruz. (Haritaya genişlik ve yükseklik vermeyi unutmayın.)
Global bir map değişkeni tanımlayıp oluşturacağımız initialize methodunda değerini atıyoruz ve bunun yanında zorunlu olan center ve zoom değişkenlerini de atıyoruz.
Sonrasında document ready'de yani sayfa yüklendiğinde bu methodu çağırıyoruz.
Merkez lokasyonumuzu oluşturmamız gerekiyor bunun için aşağıdaki kod parçacığını kullanıyoruz.
var map;
function initialize()
{
var mapProp = {
center: myCenter,
zoom: 13,
mapTypeId: google.maps.MapTypeId.ROADMAP,
};
map = new google.maps.Map(document.getElementById("MAP"), mapProp);
}
$(document).ready(function()
{ initialize();
});
MapTypeId Harita tipidir ve 4 çeşittir.
ROADMAP: Yol Haritası
SATELLITE: Uydu
HYBRID: Karışık
TERRAIN: Arazi Görünümü
Bu değişkenleri ilgili alan ile değiştirirek görünümü değiştirebilirsiniz.
Görünüm
position: Center pozisyonumuz ya da yeni lokasyon oluşturup bunu atayabilirsiniz.
map: Global tanımladığımız map değişkenimiz
icon: Yer işaretçimiz. Kendimiz verebilir ya hiç girmeyip default tanımlı kırmızı pin olmasını sağlayabiliriz. (Örn: icon: '/dosyayolu/icon.png')
title: İşaretçi başlığı
animation: Pin'e animasyon vermek kullanabilirsiniz. Bu örnekte Zıplama efekti bulunmaktadır. (BOUNCE)
position: myCenter,
map: map,
icon: '/assets/img/icons/' + icn,
title: 'TEST PROJECT',
animation: google.maps.Animation.BOUNCE
});
Görünüm
content: Bilgi penceresi içeriğidir. HTML veride basabilirsiniz.
content: '<strong>Lorem ipsum</strong>'
});
Pin'e tıklandığında bu pencereyi açabilmek için Pin'e click event listener ekliyoruz.
infowindow.open(map, marker);
});
Görünüm
İyi Kodlar!