Introducción a Google Maps APIv3 (parte 3): el contenedor del mapa y su cursor

Continuamos con estas entradas sobre la API de Google Maps. En esta ocasión, para tratar las propiedades de control sobre el contenedor del mapa y el cursor.

Propiedades de control sobre el contenedor del mapa

El contenedor del mapa es el elemento que contiene nuestro mapa dentro de la página HTML. El objeto MapOptions dispone de algunas propiedades que nos permiten cambiar el comportamiento de este contenedor.

noClear

Por defecto, cuando el mapa carga en la página HTML, éste borra cualquier otro contenido ubicado en el contenedor. Si por alguna razón nos interesase mantener el contenido, podemos utilizar la propiedad «noClear» con el valor «true».

[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,
noClear: true
};
var mapa = new google.maps.Map(mapDiv, options);
}

[/codesyntax]

backgroundColor

La propiedad «backgroundColor» también afecta al contenedor del mapa. En este caso podemos definir el color de fondo del contenedor. El valor de esta propiedad puede ser un valor hexadecimal o alguno de los colores básicos en HTML y CSS (red, green, yellow, etc.). Cuando cargamos la página HTML es posible ver durante el tiempo de carga el color de fondo seleccionado.

[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,
noClear: true,
backgroundColor: '#000000'
};
var mapa = new google.maps.Map(mapDiv, options);
}

[/codesyntax]

Propiedades de control sobre el cursor

draggableCursor

Con esta propiedad es posible controlar el cursor cuando se sitúa sobre algún objeto arrastable dentro del mapa. Podemos establecer el valor de esta propiedad mediante alguno de los nombres de cursor definidos en la API de Google Maps, o utilizando un URL que apunte a la imagen que deseamos utilizar.

Aquí 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,
noClear: true,
backgroundColor: '#000000',
draggableCursor: 'crosshair'
};
var mapa = new google.maps.Map(mapDiv, options);
}

[/codesyntax]

draggingCursor

La propiedad «draggingCursor» es similar a la anterior. La diferencia es que en este caso, el cursor sólo cambia cuando arrastramos un objeto en el 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,
noClear: true,
backgroundColor: '#000000',
draggingCursor: 'crosshair'
};
var mapa = new google.maps.Map(mapDiv, options);
}

[/codesyntax]