Custom Google Maps markers: estilos y animaciones CSS3

Hace unos meses, tuvimos que personalizar los marcadores (markers) de un mapa de Google para un proyecto, y aunque la API Javascript de Google Maps realmente me pareció amplia y fácil de entender, me di cuenta que en lo que más tiempo perdimos, fue en tener claro cómo empezar (que como siempre era una chorrada) pero la primera vez lees y lees sin tener muy claro qué hacer. Otra parte que también nos hizo perder bastante tiempo fue dar con el marker exacto que necesitábamos.

En nuestro caso, los markers debían ser redondos, de colores, y debían tener una animación inicial…ya ves, simpático que estaba el diseñador cuando lo pensó.

Empezaré por el principio para que veáis lo fácil que es presentar el mapa y después pasamos a los markers.

(Nota: Para entender bien este post hay que tener unos mínimos conocimientos de JS y de programación orientada a objetos.)

1. EL HTML: En nuestro HTML necesitamos un div que contendrá el mapa, le ponemos un id para que sea más fácil identificarlo.
Para este ejemplo vamos a hacer un mapa que ocupe el 100% del documento.
También tendremos que poner el link a la API de Maps:

2. EL MAPA: Ahora tenemos que crear el mapa, al constructor debemos pasarle dos parámetros: el elemento html que va a contener el mapa, y un objeto que agrupa las opciones de configuración del mismo.

El objeto mapOptions debe tener la configuración mínima para mostrar nuestro mapa, lo normal es especificar; zoom inicial, punto central del mapa y tipo de mapa (MapTypeId), aunque tenemos un montón de parámetros opcionales para configurar, que podéis ver aquí.

Yo voy a añadir disableDefaultUI, para que no se muestren los controles del zoom, ni el resto de elementos de la UI por defecto.

El punto central lo obtenemos mediante google.maps.LatLng(latitud, longitud), y los tipos de mapa básicos son 4;
ROADMAP, SATELLITE, HYBRID y TERRAIN.
Nosotros usaremos el ROADMAP que es el más común. (Más información acerca de tipos de mapas aquí)

Y para dejar nuestro mapa hecho un primor y ser limpios y ordenados, vamos a meter todo en una función init, para que el mapa se cargue en el evento load.

Hasta aquí hemos creado el mapa con la configuración que queremos y centrado en las coordenadas deseadas, recopilamos código:

3. EL CUSTOM MARKER SIMPLE:

Para dibujar un marker a nuestro gusto, en vez de el típico de Google Maps rojo con el punto negro, tenemos que asociar a nuestro mapa un nuevo objeto que lo defina, para ello utilizaremos la clase google.maps.Marker.

– Le decimos dónde queremos que se coloque el marcador, en nuestro caso, en el centro del mapa, y utilizamos el método .getCenter().
– Le decimos también cómo debe representarse mediante “icon”, que a su vez tiene varios parámetros, veamos:
path determina la forma, aquí podríamos meter notación SVG que queramos (ver ejemplo). En nuestro caso vamos a utilizar unas constantes que ya nos ofrece Google, porque queremos un círculo sin más.
– Definimos el tamaño, colores de borde y relleno y opacidad.
– Y por último, a qué mapa debe asociarse (myMap)

Con todo esto ya tenemos un mapa con un marker personalizado, que quedaría así:

Captura de pantalla 2014-09-14 a la(s) 21.09.43

El código completo sería el siguiente:

4. ANIMAR EL MARKER:

Aquí empezó nuestra odisea de prueba/error porque la API tiene muchas maneras de personalizar los markers (cambiar formas y tamaños, poner una imagen propia…), pero una vez que conseguimos pintar lo que queríamos, no podíamos acceder a él para animarlo, los markers simples de maps, no tienen entidad dentro del DOM, de modo que no podemos atacarlos ni con CSS ni con js.

Existen dos animaciones predeterminadas para ellos (BOUNCE y DROP), pero que no nos servían. Por otro lado, también tenemos la opción de animarlos con el método setTimeout(), pero sinceramente me parece muchísimo más complicado que la solución que encontramos nosotros.

NUESTRO AMIGO EL MARKERWITHLABEL: (Te queremos MarkerWithLabel)

Descubrimos un tipo de marcadores que pueden llevar asociada una etiqueta, totalmente personalizable y…

redoble de tambores…

se puede asociar una clase CSS!!! Albricias!! Yujuuu!!!

El truco está en utilizar el “label” como “marker”, escondiendo el propio marker, y como podemos hacer con CSS “casi” lo que queramos, es mucho más versátil que los markers estándar.

Para ello, en vez de usar la clase google.maps.Marker, usaremos la clase MarkerWithLabel y tendremos que añadir una librería que nos permite utilizarla.

Vais a ver que la sintaxis es muy parecida a los markers que ya hemos visto, la diferencia esencial es el juego que vamos a darle después con CSS, os pongo el código js y seguimos.

Por último, el CSS que hará la animación, como en este caso no hemos definido ni forma ni colores porque no queremos que se vea el marker real, tenemos que hacer que el “label” parezca un marker y darle los estilos que buscamos.

Vamos a pintar un círculo verde con un borde azul, y con una sombra y todo!!!, y que al cargar tenga una animación que lo hace crecer y decrecer 3 veces, el CSS no os lo explico porque si habéis llegado hasta aquí, doy por hecho que lo sabéis interpretar:

Como podéis ver, nuestro círculo es de 20x20px, y ahora os explico el parámetro “labelAnchor: new google.maps.Point(10, 10)”:
Este parámetro coloca el “label” respecto del centro del marker que tiene asociado, si no lo ponemos quedaría así:

Captura de pantalla 2014-09-14 a la(s) 21.40.09

En la imagen vemos un punto negro, que sería el marker (lo he pintado para que se vea) y veis que el label (circulo verde y azul) no está centrado. Como mi label mide 20x20px, lo muevo 10 arriba y 10 a la izquierda.

Tenéis varios ejemplos de MarkerWithLabel aquí.

Pues ya está, podéis ver el mapa final con las animaciones en este Pen:

See the Pen Custom CSS styles and animations in Google Maps markers by Diana (@diana_aceves) on CodePen.

Espero que os sirva! Nos vemos! 😉

6 Responses to “Custom Google Maps markers: estilos y animaciones CSS3”

  1. Fernando Huitron

    Excelente hoy aprendí como manipular y controlar los mapas, y homenaje a Sublime Text es genial, saludos desde México

    Responder

Leave a Reply

  • (will not be published)

XHTML: You can use these tags: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">