Controles de mapas de Google
Google Maps: los controles predeterminados
Cuando se muestra un mapa estándar de Google, viene con el conjunto de controles predeterminado:
- Zoom: muestra un control deslizante o botones "+/-" para controlar el nivel de zoom del mapa
- Panorámica: muestra un control panorámico para desplazar el mapa
- MapType: permite al usuario alternar entre tipos de mapas (hoja de ruta y satélite)
- Street View: muestra un ícono de Pegman que se puede arrastrar al mapa para habilitar Street View
Google Maps - Más controles
Además de los controles predeterminados, Google Maps también tiene:
- Escala: muestra un elemento de escala de mapa
- Rotar: muestra un pequeño ícono circular que le permite rotar mapas
- Mapa general: muestra un mapa general en miniatura que refleja la ventana gráfica del mapa actual dentro de un área más amplia
Puede especificar qué controles mostrar al crear el mapa (dentro de MapOptions) o llamando a setOptions() para cambiar las opciones del mapa.
Google Maps - Deshabilitar los controles predeterminados
En su lugar, es posible que desee desactivar los controles predeterminados.
Para hacerlo, establezca la propiedad disabledDefaultUI del mapa (dentro del objeto de opciones del mapa) en verdadero:
Ejemplo
var mapOptions {disableDefaultUI: true}
Google Maps - Activar todos los controles
Algunos controles aparecen en el mapa de forma predeterminada; mientras que otros no aparecerán a menos que los configure.
La adición o eliminación de controles del mapa se especifica en el objeto Opciones de mapa.
Establezca el control en verdadero para que sea visible - Establezca el control en falso para ocultarlo.
El siguiente ejemplo "activa" todos los controles:
Ejemplo
var mapOptions {
panControl: true,
zoomControl: true,
mapTypeControl: true,
scaleControl: true,
streetViewControl: true,
overviewMapControl: true,
rotateControl: true
}
Google Maps - Modificación de controles
Varios de los controles del mapa son configurables.
Los controles se pueden modificar especificando campos de opciones de control.
Por ejemplo, las opciones para modificar un control Zoom se especifican en el campo zoomControlOptions. El campo zoomControlOptions puede contener:
- google.maps.ZoomControlStyle.SMALL: muestra un mini control de zoom (solo botones + y -)
- google.maps.ZoomControlStyle.LARGE: muestra el control deslizante de zoom estándar
- google.maps.ZoomControlStyle.DEFAULT: elige el mejor control de zoom según el dispositivo y el tamaño del mapa
Ejemplo
zoomControl: true,
zoomControlOptions: {
style: google.maps.ZoomControlStyle.SMALL
}
Nota: Si modifica un control, habilite siempre el control primero (configúrelo en verdadero).
Otro control configurable es el control MapType.
Las opciones para modificar un control se especifican en el campo mapTypeControlOptions. El campo mapTypeControlOptions puede contener:
- google.maps.MapTypeControlStyle.HORIZONTAL_BAR: muestra un botón para cada tipo de mapa
- google.maps.MapTypeControlStyle.DROPDOWN_MENU: seleccione el tipo de mapa a través de un menú desplegable
- google.maps.MapTypeControlStyle.DEFAULT: muestra el comportamiento "predeterminado" (depende del tamaño de la pantalla)
Ejemplo
mapTypeControl: true,
mapTypeControlOptions: {
style: google.maps.MapTypeControlStyle.DROPDOWN_MENU
}
También puede posicionar un control, con la propiedad ControlPosition:
Ejemplo
mapTypeControl: true,
mapTypeControlOptions: {
style: google.maps.MapTypeControlStyle.DROPDOWN_MENU,
position: google.maps.ControlPosition.TOP_CENTER
}