Personalizar iconos en los mapas de google

Crear y definir iconos para mapas de Google es algo que nos puede llevar un tiempo, porque puede resultar minucioso ajustar los distintos parámetros para conseguir un icono con el formato deseado. No obstante, vamos a dar aquí un pequeño ejemplo de cómo crear un icono que podrá servir para los interesados en cambiar la imagen por defecto del icono.

Lo que tenemos que saber a la hora de crear un icono son las diferentes propiedades de la clase GIcon, que son unas cuantas, porque los iconos se pueden personalizar en muchos parámetros distintos. Las referencias completas de esta clase conviene leerlas en la propia documentación del API de Google Maps. Pero nosotros vamos a explicar esos parámetros, al menos los necesarios para crear iconos con la imagen personalizada.

Lo primero que tenemos que hacer es definir el icono personalizado. Luego podremos crear marcas utilizando este icono. Crear un icono desde cero es complicado, porque requiere ajustar muchos parámetros, pero el API nos permite crear iconos copiando las características de otros iconos.

Entonces, por simplificar la tarea, vamos a crear un icono que es copia del icono que aparece por defecto:

var iconoMarca = new GIcon(G_DEFAULT_ICON);

Esto crea una variable iconoMarca que es una instancia de la clase GIcon, donde hemos utilizado G_DEFAULT_ICON como icono a copiar. G_DEFAULT_ICON es una constante del API de Google Maps, que contiene el icono por defecto.

Luego vamos a definir la imagen del icono, alterando el atributo image de la instancia del icono que había hecho antes. (Hablaré sobre formatos de las imágenes de los iconos más tarde en este artículo)

iconoMarca.image = "/images/bandera-roja.png";

A continuación, a través del atributo iconSize, debemos de definir el tamaño de la imagen de este icono. Los tamaños en el API se define con un objeto de la clase GSize.

var tamanoIcono = new GSize(17,17);
iconoMarca.iconSize = tamanoIcono;

Primero hemos creado el tamaño del icono y luego lo hemos asociado al atributo iconSize.

Del mismo modo, tendremos que definir la imagen que utilizaremos para la sombra y el tamaño de la imagen utilizada.

iconoMarca.shadow = "/images/sombra-bandera2.png";
var tamanoSombra = new GSize(22,18);
iconoMarca.shadowSize = tamanoSombra;

Para acabar, sólo nos queda por editar el atributo iconAnchor. Este sirve para reposicionar el lugar donde se colocan los iconos. Como se pueden hacer iconos con imágenes de distintos tamaños, hay que ajustar bien donde queremos que queden, para que la imagen que pongamos apunte al lugar correcto. Dicho de otra manera, como hemos cambiado el tamaño de la imagen del icono por defecto (que habíamos copiado para crear el icono personalizado), ahora hay que editar el atributo iconAnchor para que apunte al lugar correcto.

iconoMarca.iconAnchor = new GPoint(11, 16);

Al iconAnchor se les pasa un punto, que está formado por las coordenadas relativas a la esquina superior izquierda de la imagen donde debe estar enlazado el icono. Es el punto de la imagen que debe aparecer en el punto geográfico donde se coloca la imagen. En nuestro caso el punto (11, 16), que es donde está la puntita de la bandera. (Ver imagen del ejemplo).

Ahora podemos hacer una marca con este icono que hemos creado así.

var marker = new GMarker(point, iconoMarca);

Usuarios que han visto este tema también han visto...

- Seleccionar y copiar formulario con Javascript
- Busqueda en lista
- Librería de validaciones simples para Javascript
- Menú barra horizontal con botones para desplazar
- Validar número de checkbox marcados con Javascript

- Versión imprimible de este documento

- Enviar por e-mail este documento