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! 😉

Si te gusta, compártelo :)<br>Share on Facebook
Facebook
0Tweet about this on Twitter
Twitter
Share on Google+
Google+
0Share on LinkedIn
Linkedin
Pin on Pinterest
Pinterest
0Email this to someone
email