Google Maps: controles de la interfaz de usuario

Google Maps proporciona una interfaz de usuario con varios controles para permitir que el usuario interactúe con el mapa. Podemos agregar, personalizar y deshabilitar estos controles.

Controles predeterminados

Aquí hay una lista de los controles predeterminados proporcionados por Google Maps:

Zoom- Para aumentar y disminuir el nivel de zoom del mapa, tendremos un control deslizante con botones + y -, por defecto. Este control deslizante se ubicará en la esquina del lado izquierdo del mapa.
Pan - Justo encima del control deslizante de zoom, habrá un control de panorámica para desplazar el mapa.
Map Type- Puede ubicar este control en la esquina superior derecha del mapa. Proporciona opciones de tipo de mapa como Satélite, Mapa de ruta y Terreno. Los usuarios pueden elegir cualquiera de estos mapas.
Street view- Entre el icono de panorámica y el control deslizante de zoom, tenemos un icono de hombrecito naranja. Los usuarios pueden arrastrar este icono y colocarlo en una ubicación particular para obtener su vista de la calle.

Ejemplo

Aquí hay un ejemplo en el que puede observar los controles de IU predeterminados proporcionados por Google Maps:

Deshabilitar los controles predeterminados de la interfaz de usuario

Podemos deshabilitar los controles de IU predeterminados proporcionados por Google Maps simplemente haciendo el disableDefaultUI valor verdadero en las opciones del mapa.

Ejemplo

El siguiente ejemplo muestra cómo deshabilitar los controles de IU predeterminados proporcionados por 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>

Producirá la siguiente salida:

Habilitar / deshabilitar todos los controles

Además de estos controles predeterminados, Google Maps también proporciona tres controles más que se enumeran a continuación.

Scale- El control Escala muestra un elemento de escala del mapa. Este control no está habilitado de forma predeterminada.
Rotate- El control Rotar contiene un pequeño icono circular que le permite rotar mapas que contienen imágenes oblicuas. Este control aparece de forma predeterminada en la esquina superior izquierda del mapa. (Consulte Imágenes de 45 ° para obtener más información).
Overview- Para aumentar y disminuir el nivel de zoom del mapa, tenemos un control deslizante con botones + y -, por defecto. Este control deslizante se encuentra en la esquina izquierda del mapa.

En las opciones del mapa, podemos habilitar y deshabilitar cualquiera de los controles proporcionados por Google Maps como se muestra a continuación:

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

Ejemplo

El siguiente código muestra cómo habilitar todos los 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>

Producirá la siguiente salida:

Opciones de control

Podemos cambiar la apariencia de los controles de Google Maps usando sus opciones de control. Por ejemplo, el control del zoom se puede reducir o ampliar. La apariencia del control MapType se puede cambiar a una barra horizontal o un menú desplegable. A continuación se muestra una lista de opciones de control para los controles Zoom y MapType.

No Señor.	Nombre de control	Opciones de control
1	Control de zoom	google.maps.ZoomControlStyle.SMALL google.maps.ZoomControlStyle.LARGE google.maps.ZoomControlStyle.DEFAULT
2	Control MapType	google.maps.MapTypeControlStyle.HORIZONTAL_BAR google.maps.MapTypeControlStyle.DROPDOWN_MENU google.maps.MapTypeControlStyle.DEFAULT

Ejemplo

El siguiente ejemplo demuestra cómo utilizar las opciones de control:

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

Produce la siguiente salida:

Posicionamiento de control

Puede cambiar la posición de los controles agregando la siguiente línea en las opciones de control.

position:google.maps.ControlPosition.Desired_Position,

Aquí está la lista de posiciones disponibles donde se puede colocar un control en un 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

Ejemplo

El siguiente ejemplo muestra cómo colocar el control MapTypeid en la parte superior central del mapa y cómo colocar el control de zoom en la parte inferior central del 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>

Produce la siguiente salida:

↰ Previous page Next page ↱