Google Marker (işaretleyici) Kullanımı

Marker’lar haritada belli noktaları işaretlemek amacıyla kullanılır. İşaretlenen bölgelerle ilgili bilgiler markera tıklanıldığında gösterilebilmektedir. Bu çalışmada Google haritanıza markerın nasıl ekleneceğini ve marker üzerinden işaretlenen noktanın bilgilerinin nasıl alınacağını anlatacağız.

Önceki anlatımlarda olduğu gibi öncelikle Google Harita API’sini <script type=”text/javascript” src=”http://maps.google.com/maps/api/js?sensor=false”></script> kodu ile tanıtıp, <body onload=”initialize()” > kodu ile haritanızı HTML sayfanıza yüklüyorsunuz. Daha sonrasında marker oluşturma, oluşturulan markerın harita üzerine konulması ve noktanın bilgilerinin marker üzerine yüklenmesi gerekmektedir.

Marker oluşturmak için ;


var marker = new google.maps.Marker({
 position: myLatlng, // marker koordinatları
 map: map, // markerın konulacağı harita
 title: 'Bilgiler'  // marker penceresinin başlığı
 });

Markera tıklanınca çıkacak bilgiler için “bilgiler” değerinin tanımlanması ;


var bilgiler = "Ankara, Türkiye'nin başkentidir."

Marker üzerine tıklanınca açılacak olan pencerenin (aciklamaPenceresi) oluşturulması ve içeriğine (content) “bilgiler” değerinin konulması ;


var aciklamaPenceresi = new google.maps.InfoWindow({
 content: bilgiler
 });

Marker üzerine tıklandığında pencerenin açılmasını sağlayan fonksiyon (listener) ;


google.maps.event.addListener(marker, 'click', function() {
infowindow.open(map,marker);
 });

initialize() fonksiyonu;


function initialize() {
 var myLatlng = new google.maps.LatLng(39.89,32.78); //Ankara koordinatları
 var myOptions = {
 zoom: 4, //Yaklaşma seviyesi = 4
 center: myLatlng, // harita merkezi
 mapTypeId: google.maps.MapTypeId.ROADMAP // harita çeşidi (Yol Haritası)
 }

initialize() fonksiyonu çağırıldığı zaman, harita (“map” değeri) üzerine Ankara koordinatlarında (başka bir yer de olabilir) marker atılır. Marker üzerine tıklanıldığında açılan pencerede ise “Ankara Türkiye’nin başkentidir.” yazısı çıkar. Bu örnekten de anlaşılabileceği gibi dünya üzerindeki herhangi bir noktayla ilgili bilgiler, kullanıcılara sunulabilmektedir.

İyi denemeler…