Personalizar icono de una marca de Google Maps

Personalizar el icono de una marca

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

Usar la propiedad icon con MarkerImage

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.