Google Haritalar - Kullanıcı Arayüzü Kontrolleri

Google Haritalar, kullanıcının haritayla etkileşime girmesine izin vermek için çeşitli kontroller içeren bir Kullanıcı Arayüzü sağlar. Bu kontrolleri ekleyebilir, özelleştirebilir ve devre dışı bırakabiliriz.

Varsayılan Kontroller

İşte Google Haritalar tarafından sağlanan varsayılan kontrollerin bir listesi -

Zoom- Haritanın yakınlaştırma düzeyini artırmak ve azaltmak için varsayılan olarak + ve - düğmelerine sahip bir kaydırıcımız olacak. Bu kaydırıcı, haritanın sol tarafının köşesinde yer alacaktır.
Pan - Yakınlaştırma kaydırıcısının hemen üzerinde, haritayı kaydırmak için bir pan kontrolü olacaktır.
Map Type- Bu kontrolü haritanın sağ üst köşesinde bulabilirsiniz. Uydu, Yol Haritası ve Arazi gibi harita türü seçenekleri sunar. Kullanıcılar bu haritalardan herhangi birini seçebilir.
Street view- Pan simgesi ile yakınlaştırma kaydırıcısı arasında bir pegman simgemiz var. Kullanıcılar bu simgeyi sürükleyebilir ve sokak görünümünü almak için belirli bir konuma yerleştirebilir.

Misal

Google Haritalar tarafından sağlanan varsayılan kullanıcı arayüzü kontrollerini gözlemleyebileceğiniz bir örnek:

Kullanıcı Arayüzü Varsayılan Kontrollerini Devre Dışı Bırakma

Google Haritalar tarafından sağlanan varsayılan kullanıcı arayüzü kontrollerini, yalnızca disableDefaultUI harita seçeneklerinde true değeri.

Misal

Aşağıdaki örnek, Google Haritalar tarafından sağlanan varsayılan kullanıcı arayüzü kontrollerinin nasıl devre dışı bırakılacağını gösterir.

<!DOCTYPE html>
<html>
   
   <head>
      <script src = "https://maps.googleapis.com/maps/api/js"></script>
      
      <script>
         function loadMap() {
			
            var mapOptions = {
               center:new google.maps.LatLng(17.609993, 83.221436),
               zoom:5,
               mapTypeId:google.maps.MapTypeId.ROADMAP,
               disableDefaultUI: true
            };
				
            var map = new google.maps.Map(document.getElementById("sample"),mapOptions);
         }
      </script>
      
   </head>
   
   <body onload = "loadMap()">
      <div id = "sample" style = "width:580px; height:400px;"></div>
   </body>

</html>

Aşağıdaki çıktıyı üretecektir -

Tüm Kontrolleri Etkinleştirme / Devre Dışı Bırakma

Bu varsayılan kontrollere ek olarak, Google Haritalar ayrıca aşağıda listelendiği gibi üç kontrol daha sağlar.

Scale- Ölçek kontrolü bir harita ölçek öğesi görüntüler. Bu kontrol varsayılan olarak etkin değildir.
Rotate- Döndürme denetimi, eğik görüntüler içeren haritaları döndürmenize olanak tanıyan küçük dairesel bir simge içerir. Bu kontrol, varsayılan olarak haritanın sol üst köşesinde görünür. (Daha fazla bilgi için 45 ° Görüntülere bakın.)
Overview- Haritanın yakınlaştırma düzeyini artırmak ve azaltmak için varsayılan olarak + ve - düğmelerine sahip bir kaydırıcımız vardır. Bu kaydırıcı, haritanın sol köşesinde yer alır.

Harita seçeneklerinde, Google Haritalar tarafından sağlanan kontrollerden herhangi birini aşağıda gösterildiği gibi etkinleştirebilir ve devre dışı bırakabiliriz -

{
   panControl: boolean,
   zoomControl: boolean,
   mapTypeControl: boolean,
   scaleControl: boolean,
   streetViewControl: boolean,
   overviewMapControl: boolean
}

Misal

Aşağıdaki kod, tüm kontrollerin nasıl etkinleştirileceğini gösterir -

<!DOCTYPE html>
<html>
   
   <head>
      <script src = "https://maps.googleapis.com/maps/api/js"></script>
      
      <script>
         function loadMap() {
			
            var mapOptions = {
               center:new google.maps.LatLng(19.373341, 78.662109),
               zoom:5,
               panControl: true,
               zoomControl: true,
               scaleControl: true,
               mapTypeControl:true,
               streetViewControl:true,
               overviewMapControl:true,
               rotateControl:true
            }
				
            var map = new google.maps.Map(document.getElementById("sample"),mapOptions);
         }
      </script>
      
   </head>
   
   <body onload = "loadMap()">
      <div id = "sample" style = "width:580px; height:400px;"></div>
   </body>

</html>

Aşağıdaki çıktıyı üretecektir -

Kontrol Seçenekleri

Kontrol seçeneklerini kullanarak Google Haritalar kontrollerinin görünümünü değiştirebiliriz. Örneğin, yakınlaştırma kontrolü boyut olarak küçültülebilir veya büyütülebilir. MapType kontrol görünümü, yatay bir çubuğa veya bir açılır menüye göre değiştirilebilir. Aşağıda, Yakınlaştırma ve Harita Türü kontrolleri için Kontrol seçeneklerinin bir listesi verilmiştir.

Sr.No.	Kontrol Adı	Kontrol Seçenekleri
1	Yakınlaştırma kontrolü	google.maps.ZoomControlStyle.SMALL google.maps.ZoomControlStyle.LARGE google.maps.ZoomControlStyle.DEFAULT
2	MapType denetimi	google.maps.MapTypeControlStyle.HORIZONTAL_BAR google.maps.MapTypeControlStyle.DROPDOWN_MENU google.maps.MapTypeControlStyle.DEFAULT

Misal

Aşağıdaki örnek, kontrol seçeneklerinin nasıl kullanılacağını gösterir -

<!DOCTYPE html>
<html>
   
   <head>
      <script src = "https://maps.googleapis.com/maps/api/js"></script>
      
      <script>
         function loadMap() {
			
            var mapOptions = {
               center:new google.maps.LatLng(19.373341, 78.662109),
               zoom:5,
               mapTypeControl: true,
               
               mapTypeControlOptions: {
                  style: google.maps.MapTypeControlStyle.DROPDOWN_MENU, mapTypeIds: [
                     google.maps.MapTypeId.ROADMAP,
                     google.maps.MapTypeId.TERRAIN
                  ]
               },
					
               zoomControl: true,
               
               zoomControlOptions: {
                  style: google.maps.ZoomControlStyle.SMALL
               }
            }
				
            var map = new google.maps.Map(document.getElementById("sample"),mapOptions);
         }
      </script>
      
   </head>
   
   <body onload = "loadMap()">
      <div id = "sample" style = "width:580px; height:400px;"></div>
   </body>
   
</html>

Aşağıdaki çıktıyı üretir -

Kontrol Konumlandırma

Kontrol seçeneklerine aşağıdaki satırı ekleyerek kontrollerin konumunu değiştirebilirsiniz.

position:google.maps.ControlPosition.Desired_Position,

Bir kontrolün bir haritaya yerleştirilebileceği mevcut konumların listesi -

TOP_CENTER
TOP_LEFT
TOP_RIGHT
LEFT_TOP
RIGHT_TOP
LEFT_CENTER
RIGHT_CENTER
LEFT_BOTTOM
RIGHT_BOTTOM
BOTTOM_CENTER
BOTTOM_LEFT
BOTTOM_RIGHT

Misal

Aşağıdaki örnek, MapTypeid kontrolünün haritanın üst orta kısmına nasıl yerleştirileceğini ve yakınlaştırma kontrolünün haritanın alt orta kısmına nasıl yerleştirileceğini gösterir.

<!DOCTYPE html>
<html>
   
   <head>
      <script src = "https://maps.googleapis.com/maps/api/js"></script>
      
      <script>
         function loadMap() {
			
            var mapOptions = {
               center:new google.maps.LatLng(19.373341, 78.662109),
               zoom:5,
               mapTypeControl: true,
               
               mapTypeControlOptions: {
                  style: google.maps.MapTypeControlStyle.DROPDOWN_MENU,
                  position:google.maps.ControlPosition.TOP_CENTER,
                  
                  mapTypeIds: [
                     google.maps.MapTypeId.ROADMAP,
                     google.maps.MapTypeId.TERRAIN
                  ]
               },
					
               zoomControl: true,
               
               zoomControlOptions: {
                  style: google.maps.ZoomControlStyle.SMALL,
                  position:google.maps.ControlPosition.BOTTOM_CENTER
               }
            }
				
            var map = new google.maps.Map(document.getElementById("sample"),mapOptions);
         }
      </script>
      
   </head>
   
   <body onload = "loadMap()">
      <div id = "sample" style = "width:580px; height:400px;"></div>
   </body>
   
</html>

Aşağıdaki çıktıyı üretir -