Personalizar icono de una marca de Google Maps

Ya hemos visto como añadir una marca a un mapa de Google Maps, incluso como podemos añadir la marca de forma dinámica. Pero, ¿podemos personalizar el icono de la marca de Google Maps? La respuesta es sí.

Si nos centramos en como añadimos la marca al mapa vemos lo siguiente:

var marker = new google.maps.Marker({
  position: myLatlng,
  map: map,		      
  title:"Avila de los Caballeros"
});

Lo que podemos hacer en la inicialización es pasarle una propiedad icon, la cual espera un objeto de tipo MarkerImage. Por lo que tenemos que hacer es crear un icono mediante un MarkerImage.

var img = new google.maps.MarkerImage("icono.png");

Y lo siguiente definirlo en la inicialización del Marker:

var marker = new google.maps.Marker({
  position: myLatlng,
  map: map,		
  icon: img,      
  title:"Avila de los Caballeros"
});

Ya tenemos insertado y personalizado nuestro icono de Manual de Google Maps.

Publicaciones relacionadas:

Poner un icono dentro de Google Maps Mi primera extensión en Google Chrome Detectar la longitud y latitud sobre un mapa de Google Maps Borrar marcas de un mapa de Google Maps Incluir imagenes en Google Maps