Que tal incluir mapas na sua aplicação? Neste artigo eu mostro 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 Maps) utilizando o comando no terminal:

$ npm install @agm/core --save

Assim que o download do pacote for realizado, iremos configurar o módulo. Abra o arquivo app.module.ts e importe o módulo AgmCoreModule.

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { AgmCoreModule } from '@agm/core';
@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    AgmCoreModule.forRoot({
      apiKey: 'CHAVES_GOOGLE_MAPS'
    })
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

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 à API.

Na primeira etapa selecione “Maps“:

Em seguida, clique em “+Create a new project” e dê um nome:

Na terceira etapa será solicitada a ativação do 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 terceiro link nas referências.

Finalizado o processo, copie a chave do popup. É possível consultar as chaves no painel do Google Cloud Platform. Clique em “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.

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  texto : string = 'Wenceslau Braz - Cuidado com as cargas';
  lat: number = -23.8779431;
  lng: number = -49.8046873;
  zoom: number = 15;
}

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).

<h1> {{texto}}</h1>

<agm-map [latitude]="lat" [zoom]="zoom" [longitude]="lng">
  <agm-marker  [latitude]="lat" [longitude]="lng"></agm-marker>
</agm-map>

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:

• Fonte do projeto

Até mais!

Referências

• Angular Google Maps 
• Geração de chaves
• Orientações sobre os custos da Google
• https://developers.google.com/maps/billing/understanding-cost-of-use