--- title: "Configurar o Google Maps para o seu PWA" description: "Para exibir o Google Maps no seu Progressive Web App (PWA), é preciso ativar o Google Map Platform.   O Google tornou obrigatório ativar o" canonical_url: "https://pt.goodbarber.com/help/shop/exibir-mapas-no-pwa-r137/configurar-o-google-maps-para-o-seu-pwa-a289/" lang: pt --- # Configurar o Google Maps para o seu PWA Source: https://pt.goodbarber.com/help/shop/exibir-mapas-no-pwa-r137/configurar-o-google-maps-para-o-seu-pwa-a289/ Para exibir o Google Maps no seu Progressive Web App (PWA), é preciso ativar o [Google Map Platform.](https://developers.google.com/maps/faq) O Google tornou obrigatório ativar o faturamento com um cartão de crédito e ter uma chave de API válida para o seu projeto. Depois de criar uma conta de faturamento e um projeto, você se qualifica para a avaliação gratuita de $300 do Google Cloud Platform e para o crédito mensal recorrente de $200 da plataforma do Google Maps. Para saber mais, consulte [Billing Account Credits](https://developers.google.com/maps/billing-credits) . Siga as instruções abaixo para configurar uma chave do Google Maps para o seu PWA. ## 1. Crie um projeto Para usar a plataforma do Google Maps, você deve ter [um projeto](https://developers.google.com/maps/gmp-get-started#create-project) . 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](https://accounts.google.com/SignUp) para continuar este processo. Para criar um projeto: 1. Vá para a [plataforma do console do Google Cloud](https://console.cloud.google.com/getting-started) . 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**" ![](https://cmsphoto.ww-cdn.com/superstatic/1878443/art/default/34458529-39209645.jpg?v=1782479473.8017468) ## 2. Ative as APIs Para usar a plataforma do Google Maps, você deve [ativar as APIs](https://developers.google.com/maps/gmp-get-started#enable-api-sdk) que planeja usar com seu projeto no Cloud Console. 1. Vá para a página [Biblioteca da API do Google Maps](https://console.cloud.google.com/apis/library?filter=category):maps 2. Clique em "**API JavaScript do Google Maps**" 3. Clique em "**Ativar**" 4. Volte para a página da [biblioteca da API do Google Maps](https://console.cloud.google.com/apis/library?filter=category):maps 5. Clique em "**Maps Static API**" 6. Clique em "**Ativar**" 7. Vá para o [menu de API](https://console.cloud.google.com/google/maps-apis/api-list) e verifique se ambas as APIs estão habilitadas conforme mostrado abaixo: ![](https://cmsphoto.ww-cdn.com/superstatic/1878443/art/default/34458529-39209738.jpg?v=1782479473.805747) ## 3. Defina a sua chave API Para usar a plataforma do Google Maps, você deve ter uma [chave de API](https://developers.google.com/maps/gmp-get-started#api-key) . A chave API é adicionada a todas as suas solicitações e aplicativos. 1. Vá para a página [APIs e serviços > Credenciais](https://console.cloud.google.com/apis/credentials) . 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**" ![](https://cmsphoto.ww-cdn.com/superstatic/1878443/art/default/34458529-31506092.jpg?v=1782479473.813747) 4. Edite o nome padrão para "**PWA Map Key**" 5. Selecione **referências HTTP (sites)** 6. Adicione um item nas**Restrições de Site** Siga exatamente a mesma estrutura do exemplo dado pela Google: o seu nome de domínio precedido por *. e seguido por /* Na captura de tela abaixo, ***.goodbarber.app/*** é um EXEMPLO. *Atenção:* *Se você instalou um subdomínio no seu PWA, use apenas o seu domínio.* *Digamos que você instalou **app.mydomain.com** no seu PWA, então você deve preencher* ***.mydomain.com/*** na console do Google . *- Se você não tiver instalado nenhum nome de domínio e ainda usar o URL da GoodBarber, adicione * .goodbarber.app/ * no Google Cloud Console. Lembre-se de editar esse referenciador no Google Cloud Console se você instalar mais tarde um nome de domínio no seu PWA.* 7. Clique em "**Concluído**" 8. Clique em "**Salvar**" na parte inferior da página ![](https://cmsphoto.ww-cdn.com/superstatic/1878443/art/default/34458529-31506093.jpg?v=1782479473.829747) ## 4. Adicione a chave API ao seu PWA 1. **Copie** a sua chave API ![](https://cmsphoto.ww-cdn.com/superstatic/1878443/art/default/34458529-31506094.jpg?v=1782479473.837747) 2. No seu back office, acesse o menu inferior à esquerda **Configurações > Outras configurações > Conexões externas :: Google Maps API Key** 3. **Cole** sua chave API 4. Clique em "**Ok**" ![](https://cmsphoto.ww-cdn.com/superstatic/1878443/art/default/34458529-31506095.jpg?v=1782479473.841747) ## 5. Crie uma conta de faturamento 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](https://console.cloud.google.com/getting-started) . 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](https://developers.google.com/maps/gmp-get-started#create-billing-account) ## 6. Atualize o seu Progressive Web App 1. Acesse o menu **Canais de Vendas > PWA >** **Atualizar** 2. Clique em "**Atualizar**" A chave API do Google Maps está agora definida no seu PWA. Feche o seu PWA e reinicie-o para que as alterações entrem em vigor. ![](https://cmsphoto.ww-cdn.com/superstatic/1878443/art/default/34458529-31506096.jpg?v=1782479473.8537471) ## 7. Como evitar um faturamento excessivo se o seu uso aumentar inesperadamente? Siga as instruções do Google para definir limites de uso: [https://developers.google.com/maps/faq#usage_cap](https://developers.google.com/maps/faq#usage_cap) ## 8. Você já tem uma chave de API definida no seu back office, mas ainda não ativou o faturamento O novo preço do Google entrou em vigor em 16 de julho de 2018. Se você definiu a sua chave de API antes disso, confira o [Guia Google para usuários existentes](https://cloud.google.com/maps-platform/user-guide/) . É uma ferramenta de transição para verificar rapidamente se sua conta precisa de atualizações e ajuda você a fazer isso. ## 9. Solucionar problemas da API key de mapa para PWA 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](https://console.cloud.google.com) 2. Selecione o projeto que você criou na etapa 1 desta ajuda online na barra superior do console do Google: ![](https://cmsphoto.ww-cdn.com/superstatic/1878443/art/default/34458529-31506099.jpg?v=1782479473.857747) 3. Clique no menu **Navegação > APIs e serviços > Credenciais**: ![](https://cmsphoto.ww-cdn.com/superstatic/1878443/art/default/34458529-31506100.jpg?v=1782479473.8697472) 4. Clique na**chave de mapa PWA**que você criou na etapa 3 desta ajuda online. 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): ![](https://cmsphoto.ww-cdn.com/superstatic/1878443/art/default/34458529-31506101.jpg?v=1782479473.8817472) 6. Crie uma captura de tela da chave API completa (veja o exemplo abaixo): ![](https://cmsphoto.ww-cdn.com/superstatic/1878443/art/default/34458529-31506102.jpg?v=1782479473.8897474) 7. Abra um ticket para o suporte explicando o problema com as capturas de tela anexadas.