Personalizar iconos en los mapas de google

Como personalizar los mapas de google, con el API Google Maps, para crear mapas que tengan iconos distintos de los que aparecen por defecto.

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.

Este artículo está englobado dentro del manual de Trabajo con el API de Google Maps. Además, hay que decir que en este artículo vamos a realizar trabajos como crear marcas en los mapas, que ya explicamos anteriormente y que conviene conocer.

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

En el constructor de la clase GMarker indicamos el punto donde se debe colocar la marca y el icono que que se desea.

Para acabar habría que señalar:

1) URLs de las imágenes que hemos utilizado en el ejemplo: http://www.guiarte.com/images/bandera-roja.png
http://www.guiarte.com/images/sombra-bandera2.png

Los formatos de las imágenes los hemos creado como PNG de 24 bits con transparencia. Hemos elegido ese formato porque permite una transparencia para las imágenes. Es una transparencia avanzada con respecto a la que hemos utilizado otras veces con el formato GIF, porque no hace halos blancos alrededor del dibujo. Este formato va a ser muy necesario sobretodo para hacer la sombra de la marca, que tiene que ser forzosamente medio transparente para que quede bien.

Podemos utilizar un formato PNG 24 bits con transparencia en los más habituales programas de edición gráfica, como Photoshop. De hecho, nosotros hemos utilizado Photoshop para hacer o retocar las imágenes utilizadas.

2) El código completo del ejemplo:

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN”
“http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”>
<html xmlns=”http://www.w3.org/1999/xhtml” xmlns:v=”urn:schemas-microsoft-com:vml”>
<head>
<META HTTP-EQUIV=”Content-Type” CONTENT=”text/html;charset=ISO-8859-1″>
<title>Mapa de Google</title>
<script src=”http://maps.google.com/maps?file=api&v=2&key=ABQIAAAAUnJY3ChJhF0YgyTSDJuVfBTqu-zEVMasluaqfAe9FKyfKhfBExSs1s93Q7GOuBeSnaddg05sRmEGTs”
type=”text/javascript”></script>
<script type=”text/javascript”>
//<![CDATA[

function load() {
if (GBrowserIsCompatible()) {
var map = new GMap2(document.getElementById(“map”));
map.setCenter(new GLatLng(33,0),3);
map.addControl(new GLargeMapControl());
//map.addControl(new GMapTypeControl());
//map.addControl(new GOverviewMapControl()); ;
map.setMapType(G_NORMAL_MAP);
//map.setMapType(G_SATELLITE_MAP);

//DEFINO EL ICONO
var iconoMarca = new GIcon(G_DEFAULT_ICON);
iconoMarca.image = “/images/bandera-roja.png”;
var tamanoIcono = new GSize(17,17);
iconoMarca.iconSize = tamanoIcono;
iconoMarca.shadow = “/images/sombra-bandera2.png”;
var tamanoSombra = new GSize(22,18);
iconoMarca.shadowSize = tamanoSombra;
iconoMarca.iconAnchor = new GPoint(11, 16);

function createMarker(point,nombre,continente,pais) {

//CREO LA MARCA EN EL PUNTO Y CON EL ICONO DESEADO
var marker = new GMarker(point, iconoMarca);

GEvent.addListener(marker, ‘click’, function() {
marker.openInfoWindowHtml(“<span style=’font-size: 8pt; font-family: verdana’>” + nombre + “<br><a target=’_parent’ href=’/destinos/” + continente + “/” + pais + “.html’>Ir al destino ” + nombre + “</a></span>”);
});
return marker;
}

var point = new GPoint (-4.0,40);
var nombre = “España”;
var continente = “europa”;
var pais = “espana”;
var marker = createMarker (point,nombre,continente,pais);
map.addOverlay(marker);

var point = new GPoint (2,46);
var nombre = “Francia”;
var continente = “europa”;
var pais = “francia”;
var marker = createMarker (point,nombre,continente,pais);
map.addOverlay(marker);

var point = new GPoint (-5.0,32);
var nombre = “Marruecos”;
var continente = “africa”;
var pais = “marruecos”;
var marker = createMarker (point,nombre,continente,pais);
map.addOverlay(marker);

var point = new GPoint (10.5,51.5);
var nombre = “Alemania”;
var continente = “europa”;
var pais = “alemania”;
var marker = createMarker (point,nombre,continente,pais);
map.addOverlay(marker);

}
}

window.onload=load
//]]>
</script>
<style type=”text/css”>
body{
margin:0px;
}
</style>
</head>

<body>