Google Maps - Kontrol UI

Google Maps menyediakan Antarmuka Pengguna dengan berbagai kontrol untuk memungkinkan pengguna berinteraksi dengan peta. Kami dapat menambahkan, menyesuaikan, dan menonaktifkan kontrol ini.

Kontrol Default

Berikut adalah daftar kontrol default yang disediakan oleh Google Maps -

Zoom- Untuk menambah dan mengurangi tingkat zoom peta, kami akan memiliki slider dengan tombol + dan -, secara default. Slider ini akan berada di pojok sisi kiri peta.
Pan - Tepat di atas penggeser zoom, akan ada kontrol pan untuk menggeser peta.
Map Type- Anda dapat menemukan kontrol ini di pojok kanan atas peta. Ini menyediakan opsi tipe peta seperti Satelit, Peta Jalan, dan Medan. Pengguna dapat memilih salah satu dari peta ini.
Street view- Di antara ikon pan dan penggeser zoom, kami memiliki ikon Pegman. Pengguna dapat menyeret ikon ini dan menempatkannya di lokasi tertentu untuk mendapatkan tampilan jalannya.

Contoh

Berikut adalah contoh di mana Anda dapat mengamati kontrol UI default yang disediakan oleh Google Maps -

Menonaktifkan Kontrol Default UI

Kita dapat menonaktifkan kontrol UI default yang disediakan oleh Google Maps hanya dengan membuat disableDefaultUI nilai true dalam opsi peta.

Contoh

Contoh berikut menunjukkan cara menonaktifkan kontrol UI default yang disediakan oleh Google Maps.

<!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>

Ini akan menghasilkan keluaran sebagai berikut -

Mengaktifkan / Menonaktifkan Semua Kontrol

Selain kontrol default ini, Google Maps juga menyediakan tiga kontrol lagi seperti yang tercantum di bawah ini.

Scale- Kontrol Skala menampilkan elemen skala peta. Kontrol ini tidak diaktifkan secara default.
Rotate- Kontrol Putar berisi ikon lingkaran kecil yang memungkinkan Anda memutar peta yang berisi citra miring. Kontrol ini muncul secara default di sudut kiri atas peta. (Lihat Citra 45 ° untuk informasi lebih lanjut.)
Overview- Untuk menambah dan mengurangi tingkat zoom peta, kami memiliki slider dengan tombol + dan -, secara default. Slider ini terletak di pojok kiri peta.

Di opsi peta, kami dapat mengaktifkan dan menonaktifkan kontrol apa pun yang disediakan oleh Google Maps seperti yang ditunjukkan di bawah ini -

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

Contoh

Kode berikut menunjukkan cara mengaktifkan semua kontrol -

<!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>

Ini akan menghasilkan keluaran sebagai berikut -

Opsi Kontrol

Kita dapat mengubah tampilan kontrol Google Maps menggunakan opsi kontrolnya. Misalnya, kontrol zoom dapat diperkecil atau diperbesar ukurannya. Tampilan kontrol MapType dapat bervariasi menjadi bilah horizontal atau menu tarik-turun. Diberikan di bawah ini adalah daftar opsi Kontrol untuk Zoom dan kontrol MapType.

Sr.No.	Nama Kontrol	Opsi Kontrol
1	Kontrol zoom	google.maps.ZoomControlStyle.SMALL google.maps.ZoomControlStyle.LARGE google.maps.ZoomControlStyle.DEFAULT
2	Kontrol MapType	google.maps.MapTypeControlStyle.HORIZONTAL_BAR google.maps.MapTypeControlStyle.DROPDOWN_MENU google.maps.MapTypeControlStyle.DEFAULT

Contoh

Contoh berikut menunjukkan cara menggunakan opsi kontrol -

<!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>

Ini menghasilkan output berikut -

Kontrol Positioning

Anda dapat mengubah posisi kontrol dengan menambahkan baris berikut dalam opsi kontrol.

position:google.maps.ControlPosition.Desired_Position,

Berikut adalah daftar posisi yang tersedia di mana kontrol dapat ditempatkan pada peta -

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

Contoh

Contoh berikut menunjukkan bagaimana menempatkan kontrol MapTypeid di tengah atas peta dan bagaimana menempatkan kontrol zoom di tengah bawah peta.

<!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>

Ini menghasilkan output berikut -