Configurar o Google Maps para o seu PWA

Para exibir o Google Maps no seu Progressive Web App (PWA), você precisa de um projeto Google Cloud com o faturamento ativado e de uma chave API válida. Sem faturamento, o Google atende apenas uma solicitação de mapa por dia.

Cada serviço do Google Maps tem o seu próprio limite gratuito mensal: 10.000 carregamentos de mapa, 10.000 imagens de mapa estáticas e 10.000 buscas de endereço na tabela de preços global (70.000 nas contas elegíveis à tabela de preços da Índia). Acima desses limites, a sua conta de faturamento é cobrada. O antigo crédito mensal de US$ 200 terminou em 1º de março de 2025, e o teste gratuito de US$ 300 do Google Cloud não é uma oferta gratuita do Maps. Veja os preços da Google Maps Platform .

Siga as etapas abaixo nesta ordem.

Para usar a plataforma do Google Maps, você deve ter uma conta de faturamento. A conta de faturamento é usada para rastrear os custos associados aos seus projetos.

1. Vá para a plataforma do console do Google Cloud .
2. Clique no botão do menu de navegação no canto superior esquerdo e selecione "Faturamento".
3. Configure sua conta de faturamento.
Se esta for sua primeira conta de faturamento, na página Faturamento:
- Clique no botão Adicionar conta de faturamento.
- Siga as etapas para configurar sua primeira conta de faturamento.

Se você já tem uma conta de faturamento, na página Faturamento:
- Clique na lista suspensa de faturamento e selecione Gerenciar contas de faturamento. Você verá uma lista de suas contas de faturamento atuais.
- Selecione Criar conta
- Siga as instruções para configurar sua próxima conta de faturamento.

Encontre mais informações sobre a documentação do Google: https://developers.google.com/maps/gmp-get-started#create-billing-account

Para usar a plataforma do Google Maps, você deve ter um projeto . O projeto é a base para o gerenciamento de serviços, credenciais, faturamento, APIs e SDKs. Os custos de uso associados ao projeto serão cobrados da conta de faturamento vinculada ao projeto.

Caso você não tenha uma Conta do Google, crie uma para continuar este processo.

Para criar um projeto:

1. Vá para a plataforma do console do Google Cloud .
2. Clique no botão do menu de navegação no canto superior esquerdo e selecione "Página inicial".
3. Clique na lista suspensa do projeto e selecione "NOVO PROJETO".
4. Na página Novo Projeto, preencha as informações necessárias:
- Nome do projeto: aceite o padrão ou insira um nome personalizado.
O nome do projeto pode ser alterado a qualquer momento.
- ID do projeto: aceite o padrão ou clique em EDITAR para inserir uma ID personalizada.
O ID do projeto não pode ser alterado após a criação do projeto, portanto, escolha um ID que você se sinta confortável para usar durante toda a vida do projeto.
- Localização: se você tem uma organização à qual deseja vincular seu projeto, clique em "Procurar" e selecione-a, caso contrário, escolha "Sem organização".
O ID do projeto não pode ser alterado após a criação do projeto, portanto, escolha um ID que você se sinta confortável para usar durante toda a vida do projeto.
- Local: Se você tem uma organização à qual deseja vincular seu projeto, clique em Procurar e selecione-a; caso contrário, escolha "Sem organização".
5. Clique em "CRIAR"

O seu PWA usa três APIs do Google. Ative-as no projeto que você acabou de criar:

1. Acesse a biblioteca de APIs do Maps
2. Clique em "Maps JavaScript API" e depois em "Ativar" (mapas interativos)
3. Volte, clique em "Maps Static API" e depois em "Ativar" (imagens de mapa)
4. Volte, clique em "Geocoding API" e depois em "Ativar" (a ação "usar minha localização" dos campos de endereço)
5. Verifique se as três APIs estão ativadas.

O seu PWA não usa Places, Directions nem Distance Matrix: você não precisa ativá-las.

Para usar a plataforma do Google Maps, você deve ter uma chave de API . A chave API é adicionada a todas as suas solicitações e aplicativos.

1. Vá para a página APIs e serviços > Credenciais .
2. Clique em Criar credenciais > chave de API.
A caixa de diálogo Chave de API criada exibe sua chave de API recém-criada.
3. Clique em "Restringir chave"

4. Renomeie a chave para "PWA Map Key"
5. Em Restrições de aplicativos, selecione Sites
6. Adicione o seu domínio duas vezes, para autorizar todos os endereços do seu PWA:
https://meudominio.com/* e https://*.meudominio.com/*
EXEMPLO se você ainda usa o endereço GoodBarber: https://*.goodbarber.app/*

Atenção: se instalar um nome de domínio no seu PWA mais tarde, adicione-o à lista. Mantenha também o endereço GoodBarber na lista.

7. Em Restrições de API, selecione Restringir chave e marque Maps JavaScript API, Maps Static API e Geocoding API. Se faltar uma, a função correspondente do seu PWA para de funcionar.
8. Clique em "Salvar"

1. Copie a sua chave API

2. No seu back office, acesse o menu Configurações > Conexões externas
3. Na lista de provedores de mapas, selecione Google Maps
4. Cole a sua chave API
5. Opcional: cole um Google Cloud Map ID para estilizar os seus mapas (veja abaixo)
6. Clique em "Salvar"

1. Acesse o menu Publicar > PWA > Atualizar
2. Clique em "Atualizar"

Pronto, a chave API do Google Maps está integrada ao seu PWA.
Feche o seu PWA e abra-o novamente para que as alterações sejam aplicadas.

Um Map ID aplica aos mapas do seu PWA um estilo salvo no seu projeto Google Cloud. Sem Map ID, o seu PWA mantém o mapa padrão do Google.

1. No mesmo projeto Google Cloud da sua chave API, acesse a página Gerenciamento de mapas
2. Clique em "Criar ID de mapa"
3. Dê um nome a ele, escolha o tipo de mapa JavaScript e depois Rasterização (mapa plano) ou Vetor
4. Clique em "Salvar" e copie o Map ID

5. Na página Estilos de mapa , crie um estilo, personalize-o e publique-o. Depois volte para Gerenciamento de mapas, abra o seu Map ID e, em Estilos de mapa, escolha o seu estilo para o modo claro. O seu PWA sempre exibe o estilo do modo claro, mesmo num dispositivo configurado no modo escuro: o estilo do modo escuro não é usado. Veja a documentação do Google para mais detalhes.

6. Cole o Map ID em Configurações > Conexões externas para estilizar todos os mapas do seu app.
7. Para dar um estilo próprio a uma seção Mapas, uma seção Agenda ou um widget Mapa, cole um Map ID nas configurações de mapa do seu design. Deixe esse campo vazio para manter o Map ID do app.
Atenção: cole o Map ID exibido na página Gerenciamento de mapas, e não o ID do estilo exibido na página Estilos de mapa. Com um ID de estilo, o mapa mantém o estilo padrão do Google.
8. Atualize as configurações do seu PWA.

Nos mapas que usam um Map ID, os marcadores são exibidos com os marcadores avançados do Google. O Map ID precisa vir do mesmo projeto Google Cloud da sua chave API. Usar um Map ID num mapa web não custa mais: cada mapa continua contando como um carregamento.

Defina cotas nas suas APIs: quando uma cota é atingida, o Google deixa de responder até o dia seguinte, então a sua fatura não pode ultrapassá-la. Um alerta de orçamento só envia um e-mail, ele não interrompe o uso.
https://developers.google.com/maps/faq#usage_cap

Se os seus mapas ainda não forem exibidos no seu PWA depois de você ter seguido o processo completo:
1. Acesse o seu Google Cloud Console
2. Selecione o projeto que você criou na etapa 1 desta ajuda on-line na barra superior do console do Google:

3. Clique no menu Navegação > APIs e serviços > Credenciais:

4. Clique na chave de mapa PWA que você criou na etapa 3 desta ajuda on-line.
5. Faça uma captura de tela das configurações da sua chave, para que possamos ver as Restrições do Aplicativo e as Restrições do Site da sua chave API (veja o exemplo abaixo):

6. Crie uma captura de tela da chave API completa (veja o exemplo abaixo):

7. Abra um ticket com o suporte explicando o problema, com as capturas de tela anexadas.

Bom saber: se os mapas aparecem mas a ação "usar minha localização" dos campos de endereço não funciona, verifique se a Geocoding API está ativada e autorizada na sua chave.