Google Maps control SET

Anterior: Google Maps Evento

Siguiente: Tipos de Google Map

Un mapa de Google - el conjunto de control por defecto es:

Google Maps - conjunto de control predeterminado se establece:

Cuando se utiliza un mapa estándar de Google, sus ajustes predeterminados son los siguientes:

.Zoom- Muestra una barra deslizante para controlar el nivel de zoom mapa
.PPan- En la pantalla del mapa es un apartamento controles de tazón, haga clic en las cuatro esquinas de la sartén el mapa
.MapType- Permite al usuario seleccionar entre los tipos de mapas (hoja de ruta y satallite) Cambiar
.StreetView- Aparece como un icono de persona, puede arrastrarlo a un punto en el mapa para abrir Street View

Google Maps - Establecer el control

Además del conjunto de control por defecto anteriormente, Google también:

Pantalla .Scale- escala del mapa
.Rotate- Mostrar una pequeña circunferencia del icono, puede girar el mapa
.verview vista en planta Map- desde la perspectiva de un mapa de área amplia

Cuando se crea un mapa se puede especificar el conjunto de controles se muestra mediante el establecimiento de la opción o llamando setOptions () para cambiar las opciones de configuración del mapa.

Google Maps - Apagar el conjunto de control por defecto

Es posible que desee desactivar el conjunto predeterminado de los controles.

Para apagar el sistema de control por defecto, establecer la propiedad en el mapa disableDefaultUI verdadera:

Ejemplos

disableDefaultUI:true

Trate »

Google Maps - todos los controles establecidos para abrir

Algunos controles ajustan la pantalla por defecto en el mapa, mientras que otros no, a menos que las plantes.

Ajuste el control para que sea visible cierto - Fije el control en falso de ocultarlo.

Los siguientes ejemplos están abiertos todos los controles:

Ejemplos

panControl:true,
zoomControl:true,
mapTypeControl:true,
scaleControl:true,
streetViewControl:true,
overviewMapControl:true,
rotateControl:true

Trate »

Google Maps - modificar el conjunto de control

Algunos controles mapas son configurables. Control de cambios establecido por el desarrollo de campo de opciones de control.

F Por ejemplo, para modificar la opción de control de ampliación hace referencia zoomControlOptions. zoomControlOptions contiene las siguientes tres opciones:

.google.maps.ZoomControlStyle.SMALL- pantalla minimizar el control del zoom
.google.maps.ZoomControlStyle.LARGE- presentación de diapositivas controles de zoom estándar
.google.maps.ZoomControlStyle.DEFAULT- equipos y el tamaño del mapa basado, seleccione el control más adecuado

Ejemplos

zoomControl : true ,
zoomControlOptions : {
style : google . maps . ZoomControlStyle . SMALL
}

Trate »

Nota: Si es necesario cambiar un control, el control primera vez (establecido a true).

Otro control es el control MapType.

MapType control puede aparecer en una de las siguientes opciones de estilo:

google.maps.MapTypeControlStyle.HORIZONTAL_BAR, en una barra horizontal aparecerá como un conjunto de botones de control como se muestra en Google Maps.
google.maps.MapTypeControlStyle.DROPDOWN_MENU, para mostrar un botón de control único, que le permite seleccionar el tipo de mapa en el menú desplegable.
google.maps.MapTypeControlStyle.DEFAULT, para mostrar el comportamiento "por defecto", que depende del tamaño de la pantalla y puede cambiar en futuras versiones de la API.

Ejemplos

mapTypeControl:true,
mapTypeControlOptions: {
style:google.maps.MapTypeControlStyle.DROPDOWN_MENU
}

Trate »

Del mismo modo, se puede utilizar el control de la propiedad ubicación especificada ControlPosition:

Ejemplos

mapTypeControl:true,
mapTypeControlOptions: {
style:google.maps.MapTypeControlStyle.DROPDOWN_MENU,
position:google.maps.ControlPosition.TOP_CENTER
}

Trate »

Google Maps - ha activado el

Crear un control personalizado para volver a Londres para el evento Click: (Si el mapa se arrastra):

Ejemplos

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);

Trate »