Personalizar iconos en los mapas de google

  • Por
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 enlace para ver el ejemplo:
http://www.guiarte.com/mapas-google/desarrolloweb/ej_icono.php

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

<div id="map" style="width: 765px; height: 388px"></div>
</body>
</html>

Autor

Miguel Angel Alvarez

Miguel es fundador de DesarrolloWeb.com y la plataforma de formación online EscuelaIT. Comenzó en el mundo del desarrollo web en el año 1997, transformando su hobby en su trabajo.

Compartir

Comentarios

Pep

11/12/2007
La documentación de mapas de Google tiene un ejemplo muy similar a este. http://code.google.com/apis/maps/documentation/overlays.html#Icons_overview

Raúl

11/12/2007
¿Podrían poner otros ejemplos de personalización de iconos en mapas de google?

Dani

19/1/2008
Muy interesantes tus artículos, me estoy basando en ellos para iniciarme en API Google Maps.
Pero tengo una pregunta, como deberíamos programar para conseguir un segundo icono?
Es decir, que en el ejemplo pudiéramos poner más países con otros iconos diferentes de la bandera, pero con las mismas características de texto y link que las otras marcas.
Muchas gracias.

Alexander

05/10/2009
Cambiar el icono de la marca
Hola, para aquellos que necesiten cambiar el icono de la amrca les recuerdo que debe ser formato pgn y google nos regala unas colecciones que podemos utilizar simplemente asigandole al icono la ruta de la imagen, ejemplo:

Ahora la misma porción pero en html, que me funciona perfecto


var point = new GPoint (-3.7034815549850464, 40.41689826118782);


var miIcono = new GIcon(G_DEFAULT_ICON);


miIcono.image = "http://gmaps-samples.googlecode.com/svn/trunk/markers/green/blank.png";


var marker = new GMarker(point, miIcono);


map.addOverlay(marker);

Espero lo aprovechen

yo por ejemplo he creado una aplicación completa para inmobiliarias y utilizo diferentes iconos para marcar las propiedades.

Cualquier duda con gusto les colboraré, mi correo es: truenosilencioso@gmail.com
Mi site: www.colombiabancos.com

Juan

02/11/2009
Se desactiva el clickeo
Buenas,
con los iconos predeterminados, tengo que cuadno das click aparece un bocadillo, pero si le cambio el icono, me desaparece esa funcion, no puedo clickear. Alguien sabe a que se debe?

Un saludo, gracias.