Saltar al contenido
Rubén Alcaraz Martínez

Pinakes

blog sobre biblioteconomía, software libre y tecnología

Introducción a Google Maps APIv3: MapOptions y la interfaz de usuario (UI)

Rubén Alcaraz
Rubén Alcaraz – 2 octubre, 2013
6 comentarios
Categoría:Humanidades digitales
Escrito por un humano, no por una IA
Escrito por un humano, no por una IA

En la anterior entrada vimos como crear un mapa simple con la API de Google Maps e introdujimos el objeto MapOptions. Las propiedades obligatorias para este objeto eran ‘center’, zoom y MapTypeId. Pero estas no son las únicas propiedades aplicables. El objeto MapOptions presenta una serie de propiedades que afectan a la interfaz de usuario, el contenedor del mapa y el cursor. En esta entrada veremos las propiedades que afectan a la interfaz de usuario.

Para empezar, recuperaremos el código con el que finalizamos la anterior entrada:

[codesyntax lang=»javascript»]

window.onload = function() {
var mapDiv = document.getElementById('map');
var catalunya = new google.maps.LatLng(41.652393,1.691895);
var options = {
center: catalunya,
zoom: 8,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var mapa = new google.maps.Map(mapDiv, options);
}

[/codesyntax]

 

Propiedades de control sobre la interfaz de usuario

disableDefaultUI

El valor por defecto de esta propiedad es «false» o lo que es lo mismo, la interfaz de usuario (UI) por defecto se muestra si nadie dice lo contrario. Al establecer esta propiedad como verdadera («true») podemos desactivar la interfaz. Desactivar la interfaz significa dejar de mostrar el control de zoom y el selector de tipo de mapa, Como veremos más adelante, también es posible desactivar la interfaz y posteriormente activar o desactivar los diferentes controles individualmente.

[codesyntax lang=»javascript»]

window.onload = function() {
var mapDiv = document.getElementById('map');
var catalunya = new google.maps.LatLng(41.652393,1.691895);
var options = {
center: catalunya,
zoom: 8,
mapTypeId: google.maps.MapTypeId.ROADMAP,
//el valor true desactiva la interfaz, el valor false (por defecto) la activa
disableDefaultUI: true
};
var mapa = new google.maps.Map(mapDiv, options);
}

[/codesyntax]

En la figura 1 es posible ver dos mapas, el de la izquierda con la interfaz de usuario desactivada y el de la derecha con la interfaz activada.

interfaz de usuario
Fig. 1. Interfaz de usuario desactivada y activada.

mapTypeControl

Con esta propiedad se controla si el «mapTypeControl» se muestra o no. Este elemento aparece ubicado por defecto en la esquina superior derecha del mapa. Se utiliza para escoger el tipo de mapa a mostrar. El valor predeterminada es «true», es decir que si no hacemos nada el mapTypeControl siempre se mostrará. Si le asignamos el valor «false», no se mostrará.

[codesyntax lang=»javascript»]

window.onload = function() {
var mapDiv = document.getElementById('map');
var catalunya = new google.maps.LatLng(41.652393,1.691895);
var options = {
center: catalunya,
zoom: 8,
mapTypeId: google.maps.MapTypeId.ROADMAP,
//el valor false desactiva el mapTypeControl. Para mostrarlo debemos utilizar el valor true o no utilizar este atributo (por defecto el valor es true)
mapTypeControl: false
};
var mapa = new google.maps.Map(mapDiv, options);
}

[/codesyntax]

mapTypeControl
Fig. 2. En la parte superior derecha se puede observar el mapTypeControl.

mapTypeControlOption

Si decidimos dejar activado el control de tipo de mapa, podemos personalizar su estilo, posición y los tipos de mapa entre los que nuestros usuarios podrán escoger. Para poder personalizar el control de tipo de mapa, es imprescindible utilizar el valor «true» para la propiedad «mapTypeControl».

Estilo

La propiedad Style determina la apariencia del objeto «mapTypeControl». Esta propiedad reside en el objeto «google.maps.MapTypeControlStyle». Los diferentes valores aplicables son:

  • DEFAULT: el valor DEFAULT modifica la apariencia del «mapTypeControl» según el tamaño de la pantalla y de algunos otros factores. Si la pantalla es suficientemente grande, el control se mostrará en una barra horizontal (fig. 2), en caso contrario, se utilizará en forma de desplegable (fig. 3).
  • HORIZONTAL_BAR: Este valor mostrará siempre nuestro «mapTypeControl» en forma de barra horizontal, por muy pequeño que sea el tamaño de la pantalla.
  • DROPDOWN_MENU: Esta opción muestra siempre el control en forma de desplegable.
dropdown
Fig. 3. Utilizando el valor DEFAULT en una pantalla pequeña obtendremos un control en forma de desplegable.

Veamos el código:

[codesyntax lang=»javascript»]

window.onload = function() {
var mapDiv = document.getElementById('map');
var catalunya = new google.maps.LatLng(41.652393,1.691895);
var options = {
center: catalunya,
zoom: 8,
mapTypeId: google.maps.MapTypeId.ROADMAP,
//Definido el mapTypeControl como true, podemos establecer los valores para la propiedad mapTypeControlOptions  
mapTypeControl: true,
mapTypeControlOptions: {
style: google.maps.MapTypeControlStyle.HORIZONTAL_BAR
}
};
var mapa = new google.maps.Map(mapDiv, options);
}

[/codesyntax]

Posición

La posición por defecto del objeto «mapTypeControl» es en la parte superior derecha del mapa. Mediante la clase «google.maps.ControlPosition» es posible posicionar este control en una ubicación diferente. Por ejemplo, las más comunes:

  • BOTTOM
  • BOTTOM_LEFT
  • BOTTOM_RIGHT
  • LEFT
  • RIGHT
  • TOP
  • TOP_LEFT
  • TOP_RIGHT
control positions
Fig. 4. Posibles posiciones de los elementos.

A pesar de poder seleccionar cualquiera de estas ubicaciones, no todas funcionan correctamente. Las posiciones LEFT y RIGHT se muestran en la misma zona que las posiciones TOP_LEFT y TOP_RIGHT. La posición BOTTOM_RIGHT no se muestra. Finalmente, la posición BOTTOM_LEFT no se muestra en la esquina inferior izquierda, sino que para evitar tapar el logo de Google, lo hace algo más centrada.

El código para cambiar la posición es:

[codesyntax lang=»javascript»]

window.onload = function() {
var mapDiv = document.getElementById('map');
var catalunya = new google.maps.LatLng(41.652393,1.691895);
var options = {
center: catalunya,
zoom: 8,
mapTypeId: google.maps.MapTypeId.ROADMAP, 
mapTypeControl: true,
mapTypeControlOptions: {
style: google.maps.MapTypeControlStyle.DROPDOWN_MENU,
//Definimos la posición del control en la parte inferior central del mapa
position: google.maps.ControlPosition.BOTTOM_CENTER
},
};
var mapa = new google.maps.Map(mapDiv, options);
}

[/codesyntax]

Con el código anterior conseguimos que nuestro «mapTypeControl» se presente en forma de desplegable y que aparezca ubicado en la parte inferior central del mapa.

mapTypeIds

La propiedad «mapTypeIds» controla los diferentes tipos de mapas disponibles para los usuarios. Es posible controlar que tipos de mapa aparecerán como seleccionables. Los mapas por defecto disponibles son:

  • MapTypeId.ROADMAP
  • MapTypeId.SATELLITE
  • MapTypeId.HYBRID
  • MapTypeId.TERRAIN

[codesyntax lang=»javascript»]

window.onload = function() {
var mapDiv = document.getElementById('map');
var catalunya = new google.maps.LatLng(41.652393,1.691895);
var options = {
center: catalunya,
zoom: 8,
mapTypeId: google.maps.MapTypeId.ROADMAP,
mapTypeControl: true,
mapTypeControlOptions: {
// Permitiremos al usuario escoger entre los siguientes dos tipos de mapa
mapTypeIds: [
google.maps.MapTypeId.ROADMAP,
google.maps.MapTypeId.HYBRID
]
}
};
var mapa = new google.maps.Map(mapDiv, options);
}

[/codesyntax]

Todo lo que hemos visto junto:

[codesyntax lang=»javascript» doclinks=»1″]

window.onload = function() {
var mapDiv = document.getElementById('map');
var catalunya = new google.maps.LatLng(41.652393,1.691895);
var options = {
center: catalunya,
zoom: 8,
mapTypeId: google.maps.MapTypeId.ROADMAP,
mapTypeControl: true,
mapTypeControlOptions: {
style: google.maps.MapTypeControlStyle.DROPDOWN_MENU,
position: google.maps.ControlPosition.BOTTOM_CENTER,
mapTypeIds: [
google.maps.MapTypeId.ROADMAP,
google.maps.MapTypeId.HYBRID
]
}
};
var mapa = new google.maps.Map(mapDiv, options);
}

[/codesyntax]

zoomControl

La herramienta de zoom se controla mediante el «zoomControl». Podemos mostrar una barra larga o un mini control más adecuado, por ejemplo, en el caso de pequeños mapas. El «zoomControl» se modifica al alterar de manera apropiada el campo zoomControlOptions dentro del objeto MapOptions. El control del zoom se puede presentar según los siguientes estilos:

  • google.maps.ZoomControlStyle.SMALL
  • google.maps.ZoomControlStyle.LARGE
  • google.maps.ZoomControlStyle.DEFAULT (se adapta según el tamaño del mapa)

[codesyntax lang=»javascript»]

window.onload = function() {
var mapDiv = document.getElementById('map');
var catalunya = new google.maps.LatLng(41.652393,1.691895);
var options = {
center: catalunya,
zoom: 8,
mapTypeId: google.maps.MapTypeId.ROADMAP,
//En este caso hemos optado por un controlador pequeño para el zoom
zoomControl: true,
zoomControlOptions: {
style: google.maps.ZoomControlStyle.SMALL
},
mapTypeControl: true,
mapTypeControlOptions: {
style: google.maps.MapTypeControlStyle.DROPDOWN_MENU,
position: google.maps.ControlPosition.BOTTOM_CENTER,
mapTypeIds: [
google.maps.MapTypeId.ROADMAP,
google.maps.MapTypeId.HYBRID
]
}
};
var mapa = new google.maps.Map(mapDiv, options);
}

[/codesyntax]

panControl

El «panControl» es el control que nos permite movernos por el mapa de izquierda a derecha, de arriba a abajo y viceversa, que aparece por defecto en la esquina superior izquierda. Mediante las «panControlOptions», podemos ubicar este control en otras posiciones:

[codesyntax lang=»javascript»]

window.onload = function() {
var mapDiv = document.getElementById('map');
var catalunya = new google.maps.LatLng(41.652393,1.691895);
var options = {
center: catalunya,
zoom: 8,
mapTypeId: google.maps.MapTypeId.ROADMAP,
zoomControl: true,
zoomControlOptions: {
style: google.maps.ZoomControlStyle.SMALL
},
//En este caso hemos ubicado el panControl en la esquina superior derecha
panControl: true,
    panControlOptions: {
        position: google.maps.ControlPosition.TOP_RIGHT
    },
mapTypeControl: true,
mapTypeControlOptions: {
style: google.maps.MapTypeControlStyle.DROPDOWN_MENU,
position: google.maps.ControlPosition.BOTTOM_CENTER,
mapTypeIds: [
google.maps.MapTypeId.ROADMAP,
google.maps.MapTypeId.HYBRID
]
}
};
var mapa = new google.maps.Map(mapDiv, options);
}

[/codesyntax]

 

keyboardShortcuts

Esta propiedad permite activar o desactivar la posibilidad de navegar por el mapa con el teclado. Los atajos de teclado disponibles por defecto para navegar son las cuatro teclas de dirección y las teclas +/- para el zoom. El valor por defecto es true.

[codesyntax lang=»javascript»]

keyboardShortcuts: false,

[/codesyntax]

 

disableDoubleClickZoom

Hacer doble clic dentro del mapa es igual a aumentar el zoom. Si deseamos desactivar este comportamiento por defecto podemos utilizar la propiedad «disableDoubleClickZoom» mediante el valor «true».

[codesyntax lang=»javascript»]

disableDoubleClickZoom: true

[/codesyntax]

 

draggable

Por defecto podemos movernos por el mapa, arrastrando el cursor. Si por alguna razón deseamos desactivar este comportamiento debemos establecer como «false» la propieda «draggable»:

[codesyntax lang=»javascript»]

draggable: false

[/codesyntax]

 

scrollwheel

Por defecto podemos aumentar o disminuir el zoom de nuestro mapa mediante la rueda del ratón. Si queremos desactivar este comportamiento debemos establecer la propiedad «scrollwheel» como «false»:

[codesyntax lang=»javascript»]

scrollwheel: false

[/codesyntax]

 

streetViewControl

La propiedad «streetViewControl» permite mostrar o no mostrar la funcionalidad Street View en nuestro mapa:

[codesyntax lang=»javascript»]

streetViewControl: true

[/codesyntax]

 

También podemos modificar la posición de este control de la misma manera que en casos anteriores:

[codesyntax lang=»javascript»]

streetViewControl: true,
    streetViewControlOptions: {
        position: google.maps.ControlPosition.RIGHT_TOP
    }

[/codesyntax]

Todo lo que hemos visto junto:

[codesyntax lang=»javascript»]

window.onload = function() {
var mapDiv = document.getElementById('map');
var catalunya = new google.maps.LatLng(41.652393,1.691895);
var options = {
center: catalunya,
zoom: 8,
mapTypeId: google.maps.MapTypeId.ROADMAP,
keyboardShortcuts: false,
disableDoubleClickZoom: true,
draggable: false,
scrollwheel: false,
zoomControl: true,
zoomControlOptions: {
style: google.maps.ZoomControlStyle.SMALL
},
streetViewControl: true,
    streetViewControlOptions: {
        position: google.maps.ControlPosition.RIGHT_TOP
    },
panControl: true,
    panControlOptions: {
        position: google.maps.ControlPosition.TOP_RIGHT
    },
mapTypeControl: true,
mapTypeControlOptions: {
style: google.maps.MapTypeControlStyle.DROPDOWN_MENU,
position: google.maps.ControlPosition.BOTTOM_CENTER,
mapTypeIds: [
google.maps.MapTypeId.ROADMAP,
google.maps.MapTypeId.HYBRID
]
}
};
var mapa = new google.maps.Map(mapDiv, options);
}

[/codesyntax]

 

Artículos relacionados

Introducción a Google Maps APIv3 (parte 5): múltiples marcadores con infoWindow

Introducción a Google Maps APIv3 (parte 5): múltiples marcadores con infoWindow
Materiales del curso Geolocalización y servicios basados en la localización en unidades de información

Materiales del curso Geolocalización y servicios basados en la localización en unidades de información
Introducción a Google Maps APIv3 (parte 7): añadir marcadores geocodificando direcciones

Introducción a Google Maps APIv3 (parte 7): añadir marcadores geocodificando direcciones
1er premio al mejor trabajo final de máster en el concurso 2015 de la Asociación Interacción Persona-Ordenador

1er premio al mejor trabajo final de máster en el concurso 2015 de la Asociación Interacción Persona-Ordenador

Comentarios

  1. Te hago una pregunta, como puedo hacer que el mapa me quede como este sitio donde el soom no se genera mediante la ruedita del mouse.
    Por que lo que intento hacer es que mi sitio web no se trabe cuando llega a la parte del mapa. Mil gracias

    Responder

  2. Disculpa, Ruben, tengo una pregunta acerca del zoom con la rueda del boton, me gustaria que no se generara dicho zoom hasta que se tecleara el control mas la rueda, de no ser asi que no se hiciera zoom, ¿Cómo es posible esto?

    Responder

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Este sitio usa Akismet para reducir el spam. Aprende cómo se procesan los datos de tus comentarios.

Archivo

BY-SA 4.0 — Pinakes, 2026. Desarrollado con WordPress.

Uso de cookies

Este sitio web utiliza cookies para recoger datos de analítica. Si continúas navegando estás dando tu consentimiento para la aceptación de las mencionadas cookies y la aceptación de la política de cookies.

ACEPTAR
Aviso de cookies