Personalizar icono de una marca de Google Maps

12/Oct/2012 Google , , , Deja un comentario

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:

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

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.

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

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

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

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

Difunde el Conocimiento

Si te ha gustado el artículo o te ha sido de utilidad, no dejes de compartirlo con tus amigos en las redes sociales... Te estaremos muy agradecidos. :-D

¿Algo que nos quieras comentar?

Déjanos tu comentario, no te preocupes que tu email no será publicado

*

*