Google Maps - Controles de IU

O Google Maps fornece uma interface de usuário com vários controles para permitir que o usuário interaja com o mapa. Podemos adicionar, personalizar e desativar esses controles.

Controles padrão

Aqui está uma lista dos controles padrão fornecidos pelo Google Maps -

Zoom- Para aumentar e diminuir o nível de zoom do mapa, teremos um controle deslizante com os botões + e -, por padrão. Este controle deslizante estará localizado no canto esquerdo do mapa.
Pan - Logo acima do controle deslizante de zoom, haverá um controle panorâmico para movimentar o mapa.
Map Type- Você pode localizar este controle no canto superior direito do mapa. Ele fornece opções de tipo de mapa, como satélite, mapa rodoviário e terreno. Os usuários podem escolher qualquer um desses mapas.
Street view- Entre o ícone panorâmico e o controle deslizante de zoom, temos um ícone do Pegman. Os usuários podem arrastar este ícone e colocá-lo em um local específico para obter a vista da rua.

Exemplo

Aqui está um exemplo onde você pode observar os controles de IU padrão fornecidos pelo Google Maps -

Desativando os controles padrão da IU

Podemos desativar os controles padrão da IU fornecidos pelo Google Maps simplesmente tornando o disableDefaultUI valor verdadeiro nas opções do mapa.

Exemplo

O exemplo a seguir mostra como desativar os controles de IU padrão fornecidos pelo 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>

Ele produzirá a seguinte saída -

Ativando / desativando todos os controles

Além desses controles padrão, o Google Maps também fornece mais três controles, conforme listado abaixo.

Scale- O controle Escala exibe um elemento de escala do mapa. Este controle não é habilitado por padrão.
Rotate- O controle Girar contém um pequeno ícone circular que permite girar os mapas que contêm imagens oblíquas. Este controle aparece por padrão no canto superior esquerdo do mapa. (Consulte as imagens de 45 ° para obter mais informações.)
Overview- Para aumentar e diminuir o nível de zoom do mapa, temos um controle deslizante com os botões + e -, por padrão. Este controle deslizante está localizado no canto esquerdo do mapa.

Nas opções do mapa, podemos ativar e desativar qualquer um dos controles fornecidos pelo Google Maps conforme mostrado abaixo -

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

Exemplo

O código a seguir mostra como habilitar todos os controles -

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

Ele produzirá a seguinte saída -

Opções de controle

Podemos alterar a aparência dos controles do Google Maps usando suas opções de controle. Por exemplo, o controle de zoom pode ser reduzido ou ampliado. A aparência do controle MapType pode variar para uma barra horizontal ou um menu suspenso. Abaixo está uma lista de opções de controle para controles de zoom e MapType.

Sr. Não.	Nome do Controle	Opções de controle
1	Controle de zoom	google.maps.ZoomControlStyle.SMALL google.maps.ZoomControlStyle.LARGE google.maps.ZoomControlStyle.DEFAULT
2	Controle de MapType	google.maps.MapTypeControlStyle.HORIZONTAL_BAR google.maps.MapTypeControlStyle.DROPDOWN_MENU google.maps.MapTypeControlStyle.DEFAULT

Exemplo

O exemplo a seguir demonstra como usar as opções de controle -

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

Ele produz a seguinte saída -

Posicionamento de controle

Você pode alterar a posição dos controles adicionando a seguinte linha nas opções de controle.

position:google.maps.ControlPosition.Desired_Position,

Aqui está a lista de posições disponíveis onde um controle pode ser colocado em um mapa -

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

Exemplo

O exemplo a seguir mostra como colocar o controle MapTypeid na parte superior central do mapa e como colocar o controle de zoom na parte inferior central do mapa.

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

Ele produz a seguinte saída -