Conheça os recursos e as vantagens dos novos Web Components do Google Maps para acelerar o desenvolvimento de mapas.
O Google Maps Platform dá acesso a um enorme volume de dados geográficos precisos, abrangentes e atualizados sobre mapas, locais e rotas. Mas, muitas vezes, é preciso escrever várias linhas de código e dedicar horas de programação para exibir essas informações em elementos de UI bem estilizados.
Neste post, vamos explorar os recursos e as vantagens dos novos Web Components do Google Maps no desenvolvimento de aplicações web.
O que são os Web Components do Google Maps?
O time do Google Maps Platform lançou recentemente os Web Components como uma forma inovadora de os desenvolvedores web usarem as funcionalidades do Google Maps Platform de maneira mais simples e rápida. Mesmo programadores com conhecimento básico de JavaScript conseguem exibir um mapa com poucas linhas de código. Uma vez implementado, o código segue os padrões já familiares de outros elementos HTML. Veja alguns exemplos aqui de implementação dos Maps Web Components em Typescript, Javascript, CSS e HTML.
Os Web Components são um padrão popular do W3C que permite encapsular HTML, CSS e JavaScript em um elemento HTML personalizado e reutilizável. Esses componentes reutilizáveis vão desde funcionalidades simples, como exibir a avaliação por estrelas de um local, até regras de negócio bem mais complexas, como capturar o endereço físico do usuário para entrega no eCommerce ou exibir uma rota no mapa com marcadores e estilos de polilinha personalizados. Os Web Components são facilmente interoperáveis com qualquer framework JavaScript, o que reduz a curva de aprendizado, simplifica o código e melhora a legibilidade — ajudando os desenvolvedores web a produzirem mais rápido.
O Google Maps Platform conecta-se aos Web Components por meio da sua Extended Component Library de código aberto. Essa biblioteca reúne boas práticas, código boilerplate, padrões comuns de UX/UI, responsividade e acessibilidade que vão além do que a API JavaScript do Maps oferece de fábrica, reduzindo UIs de mapa complexas a, na prática, um único elemento HTML.
Implementando os elementos Web Component do Google Maps
Você pode acessar os Web Components de mapa e de marcador avançado direto pela API JavaScript do Maps, o que torna a integração dessas funcionalidades de UI rápida e simples, com pouquíssimo JavaScript. O componente de mapa exibe um mapa em uma página web e dá acesso a outros elementos relacionados, como marcadores avançados dentro do próprio componente em HTML. Você também pode personalizar a aparência do mapa de acordo com o seu caso de uso ou marca usando a estilização de mapas em nuvem do Google Maps — basta aplicar um Map ID na seção do Google Maps no GCP Console.
O exemplo a seguir mostra como exibir informações sobre um local em um mapa usando só HTML:
Recursos sobre os Web Components do Google Maps
A documentação dos Web Components da API JavaScript do Google Maps está disponível aqui, e a Google Maps Extended Component Library de código aberto pode ser acessada no Github aqui e no NPM aqui. Esses recursos permitem criar blocos reutilizáveis que podem ser acessados, personalizados e combinados com poucas linhas de HTML, tornando a implementação da API JavaScript do Google Maps muito mais simples, rápida e, portanto, econômica. Me mande um e-mail em [email protected] para saber mais sobre o Google Maps Platform e os Web Components.