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.
PerfectScale™ for Kubernetes
Ready to optimize?
Get your free Kubernetes savings analysis
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.
Your cloud bill shouldn't be a mystery
Optimization, automation, expertise. In one platform.
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.
