Integrando o Google Maps com Angular 7

Que tal incluir mapas na sua aplicação? Neste artigo eu apresento como é fácil integrar o Google Maps em projetos Angular (versão 7).
Após a criação do projeto o passo seguinte é instalar o AGM (Angular Google Map) utilizando o comando no terminal:

$ npm install @agm/core --save

Realizado o download do pacote, vamos configurar o módulo. Abra o arquivo app.module.ts e importe o módulo AgmCoreModule.

app.module.ts

Será necessário informar uma chave (linha 15). Para isso, acesse o site: https://developers.google.com/maps/documentation/javascript/get-api-key?hl=en#key

Clique em GET STARTED.

A tela seguinte apresenta três etapas para a obtenção da chave para acesso a API.

Na primeira etapa selecione Maps:

Após a escolha, clique em +Create a new project e dê um nome:

Na terceira etapa, será solicitado para ativar o faturamento do projeto:

Marque a confirmação dos termos de serviço e continue.

A próxima fase solicita as informações pessoais e de pagamento. De acordo com a empresa, “Nenhuma cobrança automática será feita após o término da avaliação gratuita”. Para mais informações, consulte o link [c] das referências.

Finalizada o processo copie a chave do popup. É possível consultar as chaves no painel do Google Cloud Platform. Clique APIs e Serviços >> Credenciais

Com a chave da API cole em ApiKey do módulo.

Na sequência, vamos abrir o app.component.ts e definir algumas propriedades como título,lat (latitude), lgn (longitude) e zoom, conforme o código abaixo.

app.component.ts

No template do componente (app.component.html), codificamos a tag da biblioteca <agm-map> com os atributos [latitude], [longitude] e [zoom] referenciando as propriedades da classe. Definimos também um marcador com os mesmos atributos (linha 4).

app.component.html

Finalizando, e não menos importante, vamos setar uma altura para o mapa no css do componente, conforme o código do arquivo app.component.css

agm-map {
         height: 300px;
        }

Sem essa definição não é possível visualizar o mapa.
No terminal, informe o comando:

$ ng serve -o

O resultado deve ser esse:

Aqui o fonte do projeto.

Até mais.

REFERÊNCIAS

a) Angular Google Maps — https://angular-maps.com/

b ) Geração de chaves — https://kb.yoast.com/kb/generate-set-google-maps-browser-key/

c) Orientações sobre os custos da Google —

Preços e planos | Plataforma do Google Maps | Google Maps Platform | Google Cloud

https://developers.google.com/maps/billing/understanding-cost-of-use