Google Maps - Kiểm soát giao diện người dùng

Google Maps cung cấp Giao diện người dùng với nhiều điều khiển khác nhau để cho phép người dùng tương tác với bản đồ. Chúng tôi có thể thêm, tùy chỉnh và tắt các điều khiển này.

Kiểm soát mặc định

Đây là danh sách các điều khiển mặc định do Google Maps cung cấp -

Zoom- Để tăng và giảm mức thu phóng của bản đồ, theo mặc định, chúng ta sẽ có một thanh trượt với các nút + và -. Thanh trượt này sẽ nằm ở góc bên tay trái của bản đồ.
Pan - Ngay phía trên thanh trượt thu phóng, sẽ có một điều khiển xoay để quét bản đồ.
Map Type- Bạn có thể xác định vị trí điều khiển này ở góc trên cùng bên phải của bản đồ. Nó cung cấp các tùy chọn loại bản đồ như Vệ tinh, Lộ trình và Địa hình. Người dùng có thể chọn bất kỳ bản đồ nào trong số này.
Street view- Giữa biểu tượng pan và thanh trượt thu phóng, chúng ta có biểu tượng người hình mắc áo. Người dùng có thể kéo biểu tượng này và đặt tại một vị trí cụ thể để xem đường phố.

Thí dụ

Dưới đây là một ví dụ mà bạn có thể quan sát các điều khiển giao diện người dùng mặc định do Google Maps cung cấp -

Tắt các điều khiển mặc định của giao diện người dùng

Chúng tôi có thể tắt các điều khiển giao diện người dùng mặc định do Google Maps cung cấp chỉ bằng cách disableDefaultUI giá trị true trong các tùy chọn bản đồ.

Thí dụ

Ví dụ sau đây cho thấy cách tắt các điều khiển giao diện người dùng mặc định do Google Maps cung cấp.

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

Nó sẽ tạo ra kết quả sau:

Bật / Tắt tất cả các điều khiển

Ngoài các điều khiển mặc định này, Google Maps cũng cung cấp thêm ba điều khiển khác như được liệt kê bên dưới.

Scale- Điều khiển tỷ lệ hiển thị một phần tử tỷ lệ bản đồ. Kiểm soát này không được bật theo mặc định.
Rotate- Điều khiển Xoay có chứa một biểu tượng hình tròn nhỏ cho phép bạn xoay bản đồ có chứa hình ảnh xiên. Điều khiển này xuất hiện theo mặc định ở góc trên cùng bên trái của bản đồ. (Xem Hình ảnh 45 ° để biết thêm thông tin.)
Overview- Để tăng và giảm mức thu phóng của bản đồ, chúng tôi có một thanh trượt với các nút + và - theo mặc định. Thanh trượt này nằm ở góc trái của bản đồ.

Trong các tùy chọn bản đồ, chúng tôi có thể bật và tắt bất kỳ điều khiển nào do Google Maps cung cấp như hình dưới đây -

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

Thí dụ

Đoạn mã sau đây cho biết cách bật tất cả các điều khiển:

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

Nó sẽ tạo ra kết quả sau:

Tùy chọn điều khiển

Chúng tôi có thể thay đổi giao diện của các điều khiển Google Maps bằng cách sử dụng các tùy chọn điều khiển của nó. Ví dụ, điều khiển thu phóng có thể được thu nhỏ hoặc phóng to kích thước. Giao diện điều khiển MapType có thể được thay đổi thành thanh ngang hoặc menu thả xuống. Dưới đây là danh sách các tùy chọn Điều khiển cho các điều khiển Thu phóng và MapType.

Sr.No.	Tên kiểm soát	Tùy chọn điều khiển
1	Kiểm soát thu phóng	google.maps.ZoomControlStyle.SMALL google.maps.ZoomControlStyle.LARGE google.maps.ZoomControlStyle.DEFAULT
2	Kiểm soát MapType	google.maps.MapTypeControlStyle.HORIZONTAL_BAR google.maps.MapTypeControlStyle.DROPDOWN_MENU google.maps.MapTypeControlStyle.DEFAULT

Thí dụ

Ví dụ sau minh họa cách sử dụng các tùy chọn điều khiển:

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

Nó tạo ra kết quả sau:

Kiểm soát vị trí

Bạn có thể thay đổi vị trí của các điều khiển bằng cách thêm dòng sau vào các tùy chọn điều khiển.

position:google.maps.ControlPosition.Desired_Position,

Đây là danh sách các vị trí khả dụng nơi có thể đặt điều khiển trên bản đồ -

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

Thí dụ

Ví dụ sau đây cho thấy cách đặt điều khiển MapTypeid ở tâm trên cùng của bản đồ và cách đặt điều khiển thu phóng ở tâm dưới cùng của bản đồ.

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

Nó tạo ra kết quả sau: