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:

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

 

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.

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

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á.

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

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

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

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

Todo lo que hemos visto junto:

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

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

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:

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

 

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.

keyboardShortcuts: false,

 

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”.

disableDoubleClickZoom: true

 

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”:

draggable: false

 

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”:

scrollwheel: false

 

streetViewControl

La propiedad “streetViewControl” permite mostrar o no mostrar la funcionalidad Street View en nuestro mapa:

streetViewControl: true

 

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

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

Todo lo que hemos visto junto:

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