Conoce las capacidades y ventajas de los nuevos Google Maps Web Components para desarrollar mapas más rápido.
Google Maps Platform da acceso a enormes volúmenes de geodatos precisos, completos y actualizados sobre mapas, lugares y rutas, pero mostrar esa información en elementos de UI bien diseñados puede requerir muchas líneas de código y horas de trabajo de los programadores.
En este post vamos a explorar las capacidades y ventajas de los nuevos Google Maps Web Components para el desarrollo de aplicaciones web.
¿Qué son los Google Maps Web Components?
El equipo de Google Maps Platform lanzó hace poco los Web Components como una forma innovadora de que los desarrolladores web aprovechen las funciones de Google Maps Platform de manera más simple y rápida. Hasta los programadores con conocimientos limitados de JavaScript pueden mostrar un mapa con apenas unas líneas de código. Una vez implementado, el código sigue los mismos patrones que ya conoces de otros elementos HTML. Mira algunos ejemplos aquí de implementación de Maps Web Components en Typescript, Javascript, CSS y HTML.
Los Web Components son un estándar popular del W3C que te permite encapsular HTML, CSS y JavaScript en un elemento HTML personalizado y reutilizable. Estos componentes reutilizables pueden ir desde piezas atómicas de funcionalidad, como mostrar la calificación con estrellas de un lugar, hasta lógica de negocio mucho más compleja, como capturar la dirección física de un usuario para entregas de eCommerce, o trazar una ruta en un mapa con marcadores personalizados y estilos de polilíneas. Los Web Components son fácilmente interoperables con cualquier framework de JavaScript, lo que reduce la curva de aprendizaje, simplifica el código y mejora la legibilidad, ayudando a los desarrolladores web a producir más rápido.
Google Maps Platform aprovecha los Web Components a través de su Extended Component Library de código abierto. Esta librería encapsula buenas prácticas, código boilerplate, patrones comunes de UX/UI, responsividad y accesibilidad más allá de lo que ofrece la Maps JavaScript API por defecto, y reduce interfaces de mapa complejas a lo que es, en la práctica, un único elemento HTML.
Cómo implementar elementos de Google Maps Web Components
Puedes acceder a los Web Components de mapa y advanced marker directamente desde la Maps JavaScript API, lo que te da una forma simple y rápida de integrar estas funciones de UI con muy poco JavaScript. El componente de mapa muestra un mapa en una página web y te da acceso a elementos adicionales relacionados, como los advanced markers dentro del componente de mapa en HTML. También puedes cambiar la apariencia del mapa para adaptarlo a tu caso de uso o a tu marca con el estilizado de mapas en la nube de Google Maps: basta con aplicar un Map ID en la sección de Google Maps de la GCP Console.
El siguiente ejemplo muestra cómo presentar información sobre un lugar en un mapa usando solo HTML:
Recursos sobre Google Maps Web Components
Puedes consultar la documentación de los Web Components de la Google Maps Javascript API aquí, y la Google Maps Extended Component Library de código abierto está disponible en Github aquí y en NPM aquí. Estos recursos te permiten armar bloques reutilizables a los que puedes acceder, personalizar y componer con apenas unas líneas de HTML, lo que hace que la implementación de la Google Maps Javascript API sea mucho más sencilla, rápida y, por lo tanto, más rentable. Escríbeme a [email protected] si quieres saber más sobre Google Maps Platform y los Web Components.