Google Maps ofrece una interfaz de usuario con varios controles para permitir al usuario interactuar con el mapa. Podemos añadir, personalizar y desactivar estos controles.
Controles predeterminados
Aquí está una lista de los controles por defecto proporcionadas por Google Maps -
- Ampliar - Incrementar y decease el nivel de zoom del mapa, vamos a tener un control deslizante con botones + y -, de forma predeterminada. Este control deslizante se encuentra en la esquina de la parte izquierda del mapa.
- Pan - Justo encima del deslizador de zoom, habrá un control de panorama para la expansión del mapa.
- Mapa Tipo - Puede localizar este control en la esquina superior derecha del mapa. Proporciona opciones de tipo de mapa, como por satélite, Hoja de Ruta, y el terreno. Los usuarios pueden elegir cualquiera de estos mapas.
- Vista de la calle - Entre el icono de bandeja y el deslizador de zoom, tenemos un icono hombrecito naranja. Los usuarios pueden arrastrar este icono y el lugar en un lugar determinado para obtener su vista a la calle.
Ejemplo
Aquí hay un ejemplo donde se puede observar los controles de interfaz de usuario por defecto proporcionadas por Google Maps -
La desactivación de los controles de interfaz de usuario por defecto
Podemos desactivar los controles de interfaz de usuario por defecto proporcionadas por Google Maps, simplemente haciendo el disableDefaultUIvalor real en las opciones de mapa.
Ejemplo
El siguiente ejemplo muestra cómo deshabilitar los controles de interfaz de usuario por defecto proporcionadas por Google Maps.
<!DOCTYPE html>
<html>
<head>
<script src = "http://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>
Se producirá la siguiente salida -
Activación / desactivación de todos los controles
Además de estos controles por defecto, Google Maps también proporciona otros tres controles que se enumeran a continuación.
- Escala - El control de la escala muestra un elemento de la escala del mapa. Este control no está activado por defecto.
- Gire - El control Girar contiene un pequeño icono circular que le permite girar los mapas que contienen imágenes oblicuas. Este control aparece de forma predeterminada en la esquina superior izquierda del mapa.(Ver 45 ° Las imágenes para obtener más información.)
- Información general - Incrementar y decease el nivel de zoom del mapa, tenemos un slider con botones + y -, de forma predeterminada.Esta opción se encuentra en la esquina izquierda del mapa.
En las opciones de mapa, podemos activar y desactivar cualquiera de los controles previstos 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 = "http://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>
Se producirá la siguiente salida -
Opciones de control
Podemos cambiar la apariencia de los controles de mapas de Google utilizando sus opciones de control. Por ejemplo, el control de zoom puede reducirse o aumentarse su tamaño tampoco. La aparición de control MapType puede ser variada a una barra horizontal o un menú desplegable. A continuación hay una lista de opciones de control para los controles de zoom y MapType.
| No senor. | Nombre de control | Opciones de control |
|---|---|---|
| 1 | Control del zoom |
|
| 2 | Control MapType |
|
Ejemplo
El siguiente ejemplo muestra cómo utilizar las opciones de control -
<!DOCTYPE html>
<html>
<head>
<script src = "http://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>
Se produce la siguiente salida -
Posicionamiento de control
Puede cambiar la posición de los controles, añadiendo la siguiente línea en las opciones de control.
position:google.maps.ControlPosition.Desired_Position,
Aquí está la lista de puestos disponibles en un control se puede colocar en un mapa -
- TOP_CENTER
- ARRIBA A LA IZQUIERDA
- PARTE SUPERIOR DERECHA
- Left_top
- RIGHT_TOP
- LEFT_CENTER
- RIGHT_CENTER
- LEFT_BOTTOM
- ABAJO A LA DERECHA
- PARTE INFERIOR CENTRAL
- BOTTOM_LEFT
- ABAJO A LA DERECHA
Ejemplo
El siguiente ejemplo muestra cómo colocar el control mapTypeId en el centro superior del mapa y la forma de colocar el control del zoom en la parte central inferior del mapa.
<!DOCTYPE html>
<html>
<head>
<script src = "http://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>
Se produce la siguiente salida -
No hay comentarios.:
Publicar un comentario