Google Maps API v3’te Kontrolleri Yönetmek-2

31 Ekim 2012
Bu yazıyı beğendiysen paylaşmayı unutma :)
Pin It

Google haritaları üzerinde kullanıcı kontrolleri hepimizin malumu. Bu kontrolleri istekleriniz doğrultusunda özelleştirebilir, kendi kontrollerinizi de hazırlayabilirsiniz. Bu yazıda var olan kontrollere göz atacağız ancak, ilerleyen yazılarda kendi kontrollerinizi de nasıl yapabileceğinizi anlatmaya çalışacağım.

Önceki yazımdaki örnek haritamıza bir göz atacak olursak, haritanın üzerinde standart gelen kontrolleri de hatırlamış olacağız.

Kod yazmaya başlamadan önce standart kontrollerin ne işe yaradığına hızlıca bir göz atalım.

Zoom kontrolü: Haritanın sol üst köşesinde bulunur. Bu kontrolle, haritanın yakınlaştırma seviyesi kontrol edilir. Görüntü olarak büyük haritalarda zoom kontrolü kaydırma çubuğu şeklinde, örneğimizde olduğu gibi küçük haritalarda ise “+/-” işaretleri şeklinde görünür. Bu kontrol dokunmatik olmayan cihazlarda haritanın sol üst köşesinde veya dokunmatik cihazlar üzerinde sol alt köşede varsayılan olarak görünür.

MapType (Harita Tipi) kontrolü: Harita türleri arasında geçiş yapmanızı sağlayan kontroldür ve haritanın sağ üst köşesinde yer alır.

The Street View (Sokak Görünümü) kontrolü: Sokak görünümünü etkinleştirmek için harita üzerine sürüklenen ve haritanın sol üst köşesinde yer alan insan şeklindeki kontroldür. Yalnız bu kontrol yalnızca sokak görünümü hizmetinin olduğu yerlerde görüntülenir. Aksi durumda pasiftir.

Şimdi kontroller üzerinde biraz çalışalım.

1. Harita üzerindeki tüm kontrolleri isterseniz iptal edebilirsiniz. Bunun için mapOptions ayarlarını kullanacağız. Önceki yazımdaki örnek üzerinden devam ediyorum..

var mapOptions = {
  	zoom: 12,
  	center: konum,
  	mapTypeId: google.maps.MapTypeId.ROADMAP,
	disableDefaultUI: true
};

Tüm kontrolleri iptal etmek için “disableDefaultUI: true” özelliği yeterli olacaktır. Çalışan örneğe buradan bakabilirsiniz.

2. Kontrolleri tümden iptal etmek yerine, yalnızca istediklerinizi aktif ya da pasif hale getirebilirsiniz. Yine default ara yüzden devam edecek olursak, boolean değerler alabilen bu özellikleri, true/false seçenekleri ile haritanızda gösterebilir ya da gizleyebilirsiniz.

var mapOptions = {
  	zoom: 12,
  	center: konum,
  	mapTypeId: google.maps.MapTypeId.ROADMAP,
  	zoomControl: true,
  	mapTypeControl: true,
  	streetViewControl: false
};

Çalışan örneğe buradan bakabilirsiniz.

İlgili Maps API Referansı:
https://developers.google.com/maps/documentation/javascript/controls?hl=en#Adding_Controls_to_the_Map

3. Kontrolleri haritanız üzerinde pozisyonlandırabilirsiniz. Yazımın başında bahsetmiş olduğum default konumları haricinde ControlPosition tipindeki position özelliği ile kontrolleri konumlandırmanız mümkün.

Pozisyonladırma için verebileceğiz değerler şunlar; TOP_CENTER, TOP_LEFT, TOP_RIGHT, LEFT_TOP, RIGHT_TOP, LEFT_CENTER, RIGHT_CENTER, LEFT_BOTTOM, RIGHT_BOTTOM, BOTTOM_CENTER, BOTTOM_LEFT, BOTTOM_RIGHT. Daha iyi anlamak için bunlara bir de harita üzerinde bakalım.

Kontrol Pozisyonları

Burada gerçekleştirilen konumlandırma absolute, yani mutlak bir konumlandırma değildir. Haritanıza vereceğiniz yükseklik ve genişlik değerlerine göre, yani relative/göreceli şekilde değişecektir.

	var konum = new google.maps.LatLng(41.033787, 28.649889);
	var mapOptions = {
		zoom: 12,
		center: konum,
		mapTypeId: google.maps.MapTypeId.ROADMAP,
		streetViewControl: true,
		streetViewControlOptions: {
			position: google.maps.ControlPosition.LEFT_TOP
		},
		zoomControl: true,
		zoomControlOptions: {
			style: google.maps.ZoomControlStyle.LARGE,
			position: google.maps.ControlPosition.RIGHT_CENTER
		},
		mapTypeControl: true,
		mapTypeControlOptions: {
			position: google.maps.ControlPosition.TOP_CENTER
		}
	};
	var map = new google.maps.Map(document.getElementById("mapDiv"), mapOptions);

Çalışan örneğe buradan bakabilirsiniz.

Bir daha ki yazımda kendi kontrollerimizi nasıl yazacağımızı ve haritamıza nasıl ekleyeceğimizi anlatmaya çalışacağım.

Benzer Yazılar


DeliPenguen'i Google+'da bulun