Google maps básico VII (personalizar marcadores)

Google maps básico VII (personalizar marcadores)

Publicado por Quanticbyte en 2 noviembre, 2014
Categorias : GoogleMaps

Como maquear nuestros marcadores a gusto y antojo.

Lo primero que vamos a hacer es, o bien buscar una colección de iconos que nos guste, o sino crear nuestros iconos. Como somos así de molones lo creamos.
Un icono en PNG de 40 pixeles de ancho por 60 pixeles de alto.
icono_propioVale, no es lo mejor que he visto pero nos sirve :p.
De esta imagen entendemos que tiene un tamaño de 40×60 px, el centro inferior de la imagen lo encontramos en (20,60) y usamos un PNG para el tema de las transparencias.

Una vez tenemos el icono, vamos a crear el objeto imagen para nuestro marcador.

Una vez definida la imagen, ya podemos usarla como marcador, simplemente añadimos a nuestro marcador una opción más, ‘icon’, y como parámetro le pasamos el identificador de nuestra imagen.

marcadores_modifi

Sprites de marcadores.

Seguro que alguna vez, buscando iconos o imágenes, habéis topado con algún sprite.
Y bien, ¿qué es un sprite? Son una serie de imágenes en un único archivo, y ¿para que me sirven? Pues para utilizar en una misma imagen los recursos que necesitemos sin tener que estar cargando muchas imágenes pequeñas (explicación cutre :p).
Esto es un sprite:

sprites

Aquí vemos como está formado de una manera grafica

eskeleto_sprites

En este caso el sprite está formado por 10 imágenes de 50×60 pixeles unidas en línea.

Veamos cómo podemos aprovechar los sprites para poner varios tipos de iconos en nuestro mapa. Hagamos un mapa en el que cada vez que se haga clic y se ponga un marcador, éste salga con el número correspondiente; si se pasa de 9 marcadores, se borran todos y se empieza desde 0.

Veamos primero como calculamos la imagen que le tocará al icono

Vemos que la imagen la definimos con un ancho de 50 y un alto de 60:
size:new google.maps.Size(50, 60),
El origen de la imagen lo definimos con el número de icono multiplicado por el ancho de cada icono con la altura 0.
El 4 icono tendrá el origen en 3*50 = 150,0 (ponemos 3, porqué recordemos que empezamos con el numero 0).
El ancla (el punto que marcará las coordenadas), la definimos con la mitad del ancho (50/2 = 25), y la altura (60).

Así, dependiendo del número que le pasemos al marcador, nos seleccionará un icono u otro.
Veamos como ponemos los iconos a 0 una vez que hemos recorrido todo el sprite.

Si el número (que pasamos como parámetro a la función) es mayor que 9:

  1. Recorremos el array borrando los puntos del mapa.
  2. Vaciamos el array_marcadores.
  3. Contador general del programa a 0.
  4. Convertimos el número que hemos recibido (10) en un 0.

Así se procesará como el marcador nº 0.

sprites en marcadores

Otra cosita sobre los marcadores, así con el próximo artículo vamos a por algo más interesante.

Las infoWindows.

Las InfoWindows son los típicos bocadillos con información que podemos poner en los marcadores de un mapa.
La estructura de una InfoWindows:

Y para lanzarla, añadimos el evento onclick al marcador :

infoWindow

Hay que comentar que, aparte de otros parámetros, uno de los más importantes que podemos usar es maxWidth, que será el ancho máximo de nuestra infoWindow.

* El infoWindow puede contener imágenes, enlaces y cualquier elemento de una web. Incluso se puede estilar con CSS.

Ejemplo con los sprites y las infoWindows.
Descarga

Si hay algo que no quede suficientemente claro o tenéis otra manera de hacerlo… ¡comentad! 😉

6 comentarios
Avatar de paola
paola , 6 septiembre, 2017

como hacer para eliminar el boton de cerra de la info window


Avatar de Quanticbyte
Quanticbyte , 14 diciembre, 2017

tengo algun ejemplo utilizando mis propias infowindows. De todas maneras revisa la documentacion de la API para ver lo que se puede modificar.
https://developers.google.com/maps/documentation/


Avatar de Erwin
Erwin , 13 febrero, 2018

Muy buenos aportes, se podra poner una notificacion en el marcador??? es decir, que en el marcador aparezca un circulito en la parte superior derecha del marcador, indicando un numero como si fuera una notificación tipo facebook, solo el diseño, para que aparezca por ejemplo un 5.

Saludos.


Avatar de Quanticbyte
Quanticbyte , 21 abril, 2018

Buenas, interesante pregunta, si tuviera que resolver el problema a mi manera lo haría cambiando el icono del marcador conteniendo el numero dependiendo del valor a mostrar, siempre que no sean valores muy elevados … “Como esta en este post”, puedes modificar el diseño para que aparezca encima y no dentro el marcador
Otra opción es como muestra en la docu de google 😉
documentation

Espero te sirva! Saludos!


Avatar de eduardo baquero
eduardo baquero , 20 abril, 2018

hola amigo, excelente toda esta informacion, me gustaria saber si existe alguna forma de usar marcadores tal y como lo haces tu, pero en vez de usar un mapa usar una imagen a la cual ponerle los marcadores y si ese puede pues saber como hacerlo, gracias


Avatar de Quanticbyte
Quanticbyte , 21 abril, 2018

Buenas! me alegro de que te haya gustado, respecto a tú pregunta puedes hacerlo con CSS directamente sobre html pero si el diseño es responsive te dará la lata 😉 te recomiendo que mires sobre Canvas en html5.
Saludos!



Deja un comentario






Acepto la política de privacidad