Cómo personalizar los mapas de Google con Polymer

Existen multitud de componentes disponibles en Polymer, pero destaca especialmente el de los mapas de Google. A la hora de implementar Google Maps dentro de una web existen diferentes opciones. La más sencilla es utilizar un iframe en forma de widget, pero es muy básico y no pasa más allá que mostrarte el mapa de una forma discreta (en ocasiones, puede ser  suficiente). Otra forma es a través de una API, con la que podrás colocar marcas, trazados, etc, pero es complejo de trabajar y es necesario conocer diversos aspectos de programación.

Gracias a Polymer, la forma de usarlo es como el widget, pero con suficientes posibilidades de configuración para que actúe como la API. Añadir elementos y marcas a la hora de personalizar los mapas es tan fácil como utilizar una etiqueta HTML, como explicamos en este tutorial.

Instalar la etiqueta de los mapas de Google en un proyecto

Aunque de inicio, la etiqueta no la entienden los navegadores, tenemos la posibilidad de instalar el código de manera que los clientes Web la interpreten de forma correcta. Esta etiqueta se llama Custom Element.

El elemento que se instala se llama google-map y se utiliza para eliminar esa dificultad a la hora de integrar los mapas.

Conviene echarle un vistazo a la documentación del componente: https://elements.polymer-project.org/elements/google-map . Con ello estarás más familiarizado con estos elementos que nos aporta Polymer.

Para gestionar las dependencias de componentes en Polymer, recomendamos utilizar el gestor de dependencias Bower.

1.- Creamos la carpeta de proyecto. En un directorio vacío, colocaremos todos los archivos y carpetas del sitio. Si ya existe, sitúate con el terminal dentro de esa carpeta.

2.- Inicio Bower con el comando init de Bower:

bower init

3.- Instalamos la dependencia del Web Component para los mapas de Google:

bower install --save GoogleWebComponents/google-map

Con este comando instalamos las dependencias y la etiqueta para generar mapas de Google. Todos los archivos se encuentran instalados en la carpeta “bower_components”.

4.- Con la etiqueta LINK y en la página donde usaremos los mapas importamos el componente: Import en Web Components.

<link rel="import" href="/blogbower_components/google-map/google-map.html">

Verifica que la carpeta bower_components esté en la ruta que has definido en el atributo href del import.

5.- Ya está todo listo para usar el componente con la etiqueta “google-map”.

<google-map latitude="40.4" longitude="-3.7" zoom=11></google-map>

Verás que podemos indicarle varios atributos a la etiqueta, pero hay diversos otros que puedes conocer en la documentación del componente.

En el ejemplo vemos que el mapa estará centrado en la ciudad de Madrid  y con un determinado zoom.

6.- Deberíamos de aplicar un contenedor con unas dimensiones para mostrar el mapa. Esto lo hacemos así:

<style>
   google-map {
     height: 400px;
   }
 </style>

Colocar marcas en los mapas

Con la etiqueta llamada google-map-marker podremos colocar marcas dentro del mapa y que sería una etiqueta hija de google-map.

<google-map latitude="40.4" longitude="-3.7" zoom="11">
 <google-map-marker latitude="40.421432" longitude="-3.7536663" title="Esta es la Casa de Campo de Madrid"></google-map-marker>
 </google-map>

Hemos dado su latitud y longitud y con el atributo title un pequeño tooltip que aparece al poner el puntero del ratón encima de la marca.

Si quisieras hacer un globo de información para que cuando se haga clic se visualice, tendríamos que hacerlo con la etiqueta google-map-marker, y sería algo así:

<google-map-marker latitude="40.421432" longitude="-3.7536663" title="Esta es la Casa de Campo de Madrid">
 <h2>Casa de Campo de Madrid</h2>
 <p>
 Lugar donde se encuentran el parque de atracciones, zoológico, etc.
 </p>
 <p>
 <img src="http://www.guiarte.com/archivoimg/general/1563.jpg" alt="Vista de Madrid desde la casa de campo">
 </p>
 </google-map-marker>

Con Polymer podremos conseguir de manera sencilla etiquetas potentes para realizar mapas de Google y aunque hemos visto un par de ejemplos, existen otros elementos que nos servirían, por ejemplo, para colocar direcciones, trazados poligonales, etc. Puedes echarle un vistazo a los artículos que hemos publicado sobre Polymer para ver su potencial

0 comentarios

Dejar un comentario

¿Quieres unirte a la conversación?
Siéntete libre de contribuir

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *