Карты Google - элементы управления пользовательского интерфейса

Google Maps предоставляет пользовательский интерфейс с различными элементами управления, позволяющими пользователю взаимодействовать с картой. Мы можем добавлять, настраивать и отключать эти элементы управления.

Элементы управления по умолчанию

Вот список элементов управления по умолчанию, предоставляемых Google Maps -

Zoom- Чтобы увеличить или уменьшить масштаб карты, по умолчанию у нас будет ползунок с кнопками + и -. Этот ползунок будет расположен в углу левой части карты.
Pan - Чуть выше ползунка масштабирования находится элемент управления панорамированием карты.
Map Type- Вы можете найти этот элемент управления в правом верхнем углу карты. Он предоставляет такие варианты типа карты, как Спутник, Дорожная карта и Рельеф. Пользователи могут выбрать любую из этих карт.
Street view- Между значком панорамирования и ползунком масштабирования есть значок человечка. Пользователи могут перетащить этот значок в определенное место, чтобы просмотреть улицу.

пример

Вот пример, в котором вы можете наблюдать элементы управления пользовательского интерфейса по умолчанию, предоставляемые Google Maps:

Отключение элементов управления пользовательского интерфейса по умолчанию

Мы можем отключить элементы управления пользовательского интерфейса по умолчанию, предоставляемые Google Maps, просто сделав disableDefaultUI значение true в параметрах карты.

пример

В следующем примере показано, как отключить элементы управления пользовательского интерфейса по умолчанию, предоставляемые 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>

Он выдаст следующий результат -

Включение / отключение всех элементов управления

В дополнение к этим элементам управления по умолчанию, Карты Google также предоставляют еще три элемента управления, перечисленные ниже.

Scale- Элемент управления «Масштаб» отображает элемент масштаба карты. Этот элемент управления по умолчанию отключен.
Rotate- Элемент управления «Поворот» содержит небольшой круглый значок, который позволяет вращать карты с наклонными изображениями. Этот элемент управления по умолчанию отображается в верхнем левом углу карты. (Для получения дополнительной информации см. Изображение под углом 45 °.)
Overview- Для увеличения или уменьшения уровня масштабирования карты по умолчанию у нас есть ползунок с кнопками + и -. Этот ползунок расположен в левом углу карты.

В параметрах карты мы можем включать и отключать любые элементы управления, предоставляемые Google Maps, как показано ниже -

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

пример

В следующем коде показано, как включить все элементы управления -

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

Он выдаст следующий результат -

Варианты управления

Мы можем изменить внешний вид элементов управления Google Maps, используя его параметры управления. Например, можно уменьшить или увеличить масштаб элемента управления. Внешний вид элемента управления MapType может иметь вид горизонтальной полосы или раскрывающегося меню. Ниже приведен список параметров управления для элементов управления Zoom и MapType.

Sr. No.	Имя элемента управления	Варианты управления
1	Управление масштабированием	google.maps.ZoomControlStyle.SMALL google.maps.ZoomControlStyle.LARGE google.maps.ZoomControlStyle.DEFAULT
2	Элемент управления MapType	google.maps.MapTypeControlStyle.HORIZONTAL_BAR google.maps.MapTypeControlStyle.DROPDOWN_MENU google.maps.MapTypeControlStyle.DEFAULT

пример

В следующем примере показано, как использовать параметры управления -

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

Он производит следующий вывод -

Позиционирование управления

Вы можете изменить положение элементов управления, добавив следующую строку в параметры управления.

position:google.maps.ControlPosition.Desired_Position,

Вот список доступных позиций, где можно разместить элемент управления на карте -

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

пример

В следующем примере показано, как разместить элемент управления MapTypeid в верхнем центре карты и как разместить элемент управления масштабированием в центре нижней части карты.

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

Он производит следующий вывод -