Un mapa de Google - con el conjunto de control por defecto:
Google Maps - Los controles por defecto
Cuando muestra un mapa de Google estándar, viene con el conjunto de control por defecto:
- Zoom - muestra una barra de desplazamiento o "+/-" botones para controlar el nivel de zoom del mapa
- Pan - muestra un control de panorama para la exploración del mapa
- MapType - permite al usuario alternar entre los tipos de mapas (roadmap and satellite)
- Vista de la calle - muestra un icono de persona que se puede arrastrar el mapa para permitir Street View
Google Maps - Más controles
Además de los controles por defecto, Google Maps también tiene:
- Escala - muestra un elemento de la escala del mapa
- Rotar - muestra un pequeño icono circular que le permite girar mapas
- Descripción general - muestra una vista general del mapa en miniatura que refleja la vista de mapa actual dentro de un área más amplia
Puede especificar que controla para mostrar la hora de crear el mapa (inside MapOptions) o llamando setOptions() para cambiar las opciones del mapa.
Google Maps - Desactivación de los controles por defecto
En su lugar, puede que desee desactivar los controles por defecto.
Para ello, establezca la propiedad disableDefaultUI del mapa (dentro de las opciones objeto de mapa) a true:
Google Maps - Encienda todos los controles
Algunos controles aparecen en el mapa de forma predeterminada; mientras que otros no aparecerá a menos que las plantes.
Añadir o eliminar los controles del mapa se especifica en el mapa de objetos opciones.
Fije el control en verdad para que sea visible - Fije el control en falso de ocultarlo.
En el siguiente ejemplo se convierte "on" todos los controles:
Ejemplo
panControl:true,
zoomControl:true,
mapTypeControl:true,
scaleControl:true,
streetViewControl:true,
overviewMapControl:true,
rotateControl:true Inténtalo tú mismo " Google Maps - Controles Modificación
Varios de los controles del mapa son configurables.
Los controles se pueden modificar mediante la especificación de los campos de opciones de control.
Por ejemplo, las opciones para modificar un control de zoom se especifican en el campo zoomControlOptions. El campo zoomControlOptions puede contener:
- google.maps.ZoomControlStyle.SMALL - muestra un control de zoom mini (sólo teclas + y -)
- google.maps.ZoomControlStyle.LARGE - muestra el control deslizante de zoom estándar
- google.maps.ZoomControlStyle.DEFAULT - escoge el mejor control de zoom basado en dispositivo y el tamaño del mapa
Ejemplo
zoomControl:true,
zoomControlOptions: {
style:google.maps.ZoomControlStyle.SMALL
}
Inténtalo tú mismo " Note: Si modifica un control, siempre que el primer control (set it to true) .
Otra de control configurable es el control MapType.
Opciones para modificar un control se especifican en el campo objeto mapTypeControlOptions. El campo de objeto mapTypeControlOptions puede contener ::
- google.maps.MapTypeControlStyle.HORIZONTAL_BAR - pantalla 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 "default" comportamiento (depends on screen size)
Ejemplo
mapTypeControl:true,
mapTypeControlOptions: {
style:google.maps.MapTypeControlStyle.DROPDOWN_MENU
} Inténtalo tú mismo " También puede colocar un control, con la propiedad ControlPosition:
Ejemplo
mapTypeControl:true,
mapTypeControlOptions: {
style:google.maps.MapTypeControlStyle.DROPDOWN_MENU,
position:google.maps.ControlPosition.TOP_CENTER
} Inténtalo tú mismo " Google Maps - controles personalizados
Crear un control personalizado que siempre te lleva de vuelta a Londres, cuando se hace clic (if the map is dragged) :
Ejemplo
controlDiv.style.padding = '5px';
var controlUI = document.createElement('div');
controlUI.style.backgroundColor = 'yellow';
controlUI.style.border='1px solid';
controlUI.style.cursor = 'pointer';
controlUI.style.textAlign = 'center';
controlUI.title = 'Set map to London';
controlDiv.appendChild(controlUI);
var controlText = document.createElement('div');
controlText.style.fontFamily='Arial,sans-serif';
controlText.style.fontSize='12px';
controlText.style.paddingLeft = '4px';
controlText.style.paddingRight = '4px';
controlText.innerHTML = '<b>Home<b>'
controlUI.appendChild(controlText); Inténtalo tú mismo " Google Maps - controles de referencia
Google Maps API de referencia .