Integrando o Google Maps no Angular 18

Integrating Google Maps in Angular 17 Integrando o Google Maps no Angular 18 id mapa Google Console id api https://console.cloud.google.com/apis/credentials/key/e80122e1-61ea-4c89-a3c1-c0345022816d?hl=pt-br&project=my-project-expo-gps

Materia Base https://medium.com/@selsa-pingardi/integrating-google-maps-in-angular-17-66487ed2238c

"@angular/google-maps": "^18.2.3",

Iniciei Criando um repo git, que voce pode acessar para conferir os codigos tambem. Usei os comandos. Comandos padros do git que pode achar ao criar um novo repo

echo "# Integrando-o-Google-Maps-no-Angular" >> README.md
git init
git add README.md
git commit -m "first commit"
git branch -M main
git remote add origin
git push -u origin main

Iniciei um projeto em angular 18, podemos executar o comando ng new para iniciar a criacao do nosso projeto.

Ao criar obtemos esse retorno

S:\mapaInAngular>ng new
? What name would you like to use for the new workspace and initial project? IntegratingGoogleMapsinAngular
? Which stylesheet format would you like to use? CSS
? Do you want to enable Server-Side Rendering (SSR) and Static Site Generation (SSG/Prerendering)? No
CREATE IntegratingGoogleMapsinAngular/angular.json (2715 bytes)
CREATE IntegratingGoogleMapsinAngular/package.json (1064 bytes)
CREATE IntegratingGoogleMapsinAngular/README.md (1084 bytes)
CREATE IntegratingGoogleMapsinAngular/tsconfig.json (877 bytes)
CREATE IntegratingGoogleMapsinAngular/.editorconfig (274 bytes)
CREATE IntegratingGoogleMapsinAngular/.gitignore (548 bytes)
CREATE IntegratingGoogleMapsinAngular/tsconfig.app.json (263 bytes)
CREATE IntegratingGoogleMapsinAngular/tsconfig.spec.json (273 bytes)
CREATE IntegratingGoogleMapsinAngular/.vscode/extensions.json (130 bytes)
CREATE IntegratingGoogleMapsinAngular/.vscode/launch.json (470 bytes)
CREATE IntegratingGoogleMapsinAngular/.vscode/tasks.json (938 bytes)
CREATE IntegratingGoogleMapsinAngular/src/main.ts (250 bytes)
CREATE IntegratingGoogleMapsinAngular/src/favicon.ico (15086 bytes)
CREATE IntegratingGoogleMapsinAngular/src/index.html (316 bytes)
CREATE IntegratingGoogleMapsinAngular/src/styles.css (80 bytes)
CREATE IntegratingGoogleMapsinAngular/src/app/app.component.html (20884 bytes)
CREATE IntegratingGoogleMapsinAngular/src/app/app.component.spec.ts (988 bytes)
CREATE IntegratingGoogleMapsinAngular/src/app/app.component.ts (388 bytes)
CREATE IntegratingGoogleMapsinAngular/src/app/app.component.css (0 bytes)
CREATE IntegratingGoogleMapsinAngular/src/app/app.config.ts (227 bytes)
CREATE IntegratingGoogleMapsinAngular/src/app/app.routes.ts (77 bytes)
CREATE IntegratingGoogleMapsinAngular/src/assets/.gitkeep (0 bytes)
√ Packages installed successfully.
    Directory is already under version control. Skipping initialization of git.

S:\mapaInAngular>

Executando o projeto temos esse resultado

vamos adicinar codigos e configuracoes

yarn add @angular/google-maps

a lib instalada foi ^18.2.10 podemos conferir no package.json

{
	...
	 "@angular/google-maps": "^18.2.10",
	...
}

Agora sim vamos instar a lib da google para inicirarmos o mapa

<google-map height="100%" width="101%" [options]="options">
</google-map>

OPTION, precisa do map id 8bbbce2e87709eb9

options: google.maps.MapOptions = {
    mapId: "8bbbce2e87709eb9",
    center: { lat: -22, lng: -54 },
    zoom: 10,
  };

Add imports

import { GoogleMapsModule } from "@angular/google-maps";

@Component({
  selector: 'app-home',
  standalone: true,
  imports: [..., GoogleMapsModule],
  templateUrl: './home.component.html',
  styleUrl: './home.component.css'

})

index.html principal

<body>
	<script>
	(g => { var h, a, k, p = "The Google Maps JavaScript API", c = "google", l = "importLibrary", q = "__ib__", m = document, b = window; b = b[c] || (b[c] = {}); var d = b.maps || (b.maps = {}), r = new Set, e = new URLSearchParams, u = () => h || (h = new Promise(async (f, n) => { await (a = m.createElement("script")); e.set("libraries", [...r] + ""); for (k in g) e.set(k.replace(/[A-Z]/g, t => "_" + t[0].toLowerCase()), g[k]); e.set("callback", c + ".maps." + q); a.src = `https://maps.${c}apis.com/maps/api/js?` + e; d[q] = f; a.onerror = () => h = n(Error(p + " could not load.")); a.nonce = m.querySelector("script[nonce]")?.nonce || ""; m.head.append(a) })); d[l] ? console.warn(p + " only loads once. Ignoring:", g) : d[l] = (f, ...n) => r.add(f) && u().then(() => d[l](f, ...n)) })({
	  v: "weekly",
	  key: "AIzaSyCjeAzoVzfrUCojvJIwGobcp6t_ZvsnD5A"
	});
	
	</script>
</body>

ng serve

Resultado

Para finalizar vamos add alguns markets app.component.ts

brLocations_1: any[] = [
    { lat: -22.951916, lng: -43.210487 }, // Cristo Redentor, Rio de Janeiro
    { lat: -25.6953, lng: -54.4367 },      // Cataratas do Iguaçu, Paraná
    { lat: -22.9068, lng: -43.1729 },      // Pão de Açúcar, Rio de Janeiro
    { lat: -12.9714, lng: -38.5014 },      // Pelourinho, Salvador
    { lat: -3.119027, lng: -60.021731 },   // Teatro Amazonas, Manaus
  ];

  brLocations_2: any[] = [
    { lat: -23.5515, lng: -46.6333 },       // Avenida Paulista, São Paulo
    { lat: -20.4697, lng: -54.6201 },       // Bonito, Mato Grosso do Sul
    { lat: -21.136, lng: -44.2619 },        // Inhotim, Minas Gerais
    { lat: -22.795, lng: -43.1784 },        // Museu Imperial, Petrópolis
    { lat: -25.5477, lng: -54.5885 },       // Parque Nacional do Iguaçu, Paraná
    { lat: -22.9056, lng: -43.1344 },       // Maracanã, Rio de Janeiro
    { lat: -13.1631, lng: -74.2235 },       // Elevador Lacerda, Salvador
    { lat: -15.7998, lng: -47.8645 },       // Congresso Nacional, Brasília
    { lat: -8.0088, lng: -34.8545 },        // Recife Antigo, Recife
    { lat: -22.9714, lng: -44.3037 },       // Parque Nacional da Serra dos Órgãos, Teresópolis
    { lat: -23.9888, lng: -46.2577 },       // Santos Beach, São Paulo
    { lat: -23.9651, lng: -46.3264 },       // Praia de Juquehy, São Sebastião
    { lat: -23.5711, lng: -46.7016 },       // Parque Ibirapuera, São Paulo
    { lat: -2.5588, lng: -44.2737 },        // Lençóis Maranhenses, Maranhão
    { lat: -30.0346, lng: -51.2177 },       // Mercado Público de Porto Alegre, Porto Alegre
    { lat: -25.4278, lng: -49.2731 },       // Jardim Botânico, Curitiba
    { lat: -8.4072, lng: -37.0634 },        // Vale do Catimbau, Pernambuco
    { lat: -16.0044, lng: -48.0551 },       // Chapada dos Veadeiros, Goiás
  ];

Add cod para for e mostrar markets

<google-map height="100%" width="100%" [options]="options">
    @for (location of brLocations_1; track location) {
      <map-advanced-marker #markerElem="mapAdvancedMarker" [position]="{ lat: location.lat, lng: location.lng }" />
    }
    @for (location of brLocations_2; track location) {
      <map-advanced-marker #markerElem="mapAdvancedMarker" [position]="{ lat: location.lat, lng: location.lng }" />
    }
</google-map>

Resultado final

Chat

Integração do Google Maps no Angular

Este guia mostra como integrar o Google Maps em um projeto Angular e exibir marcadores com coordenadas de pontos turísticos brasileiros.

Pré-requisitos

Antes de criarmos nosso projeto Angular, certifique-se de ter uma chave de API válida para utilizar a API JavaScript do Google Maps. Você pode consultar o link abaixo para obter mais instruções: https://developers.google.com/maps/documentation/get-map-id?hl=pt-br

Além disso, também precisaremos de um ID de mapa para este componente, que pode ser obtido seguindo o link abaixo: https://developers.google.com/maps/documentation/javascript/get-api-key?hl=pt-br

Se você não tiver/não puder obter um ID de mapa, poderá usar o fornecido para desenvolvimento pelo Google:

ID do mapa = DEMO_MAP_ID

1. Criação do Repositório no GitHub

Primeiro, crie um repositório Git para o projeto. Você pode verificar o código-fonte diretamente nesse repositório. Os comandos padrão utilizados para criar e configurar o repositório são:

echo "# Integrando-o-Google-Maps-no-Angular" >> README.md
git init
git add README.md
git commit -m "first commit"
git branch -M main
git remote add origin <URL do seu repositório>
git push -u origin main

2. Configuração do Projeto Angular

Em seguida, inicie um novo projeto Angular (neste caso, versão 18) com o comando:

ng new IntegratingGoogleMapsinAngular

Durante a configuração do projeto, você pode escolher o nome e o formato de estilo (por exemplo, CSS). Ao concluir, o Angular criará a estrutura de arquivos básica.

Exemplo do retorno de criação do projeto

S:\mapaInAngular>ng new
? What name would you like to use for the new workspace and initial project? IntegratingGoogleMapsinAngular
? Which stylesheet format would you like to use? CSS
? Do you want to enable Server-Side Rendering (SSR) and Static Site Generation (SSG/Prerendering)? No
...
CREATE IntegratingGoogleMapsinAngular/src/app/app.component.css (0 bytes)
√ Packages installed successfully.

Para visualizar o projeto, use o comando:

ng serve

3. Instalação da Biblioteca Google Maps

Adicione a biblioteca @angular/google-maps:

yarn add @angular/google-maps

Isso incluirá a dependência no seu package.json:

{
  ...
  "@angular/google-maps": "^18.2.10",
  ...
}

4. Configuração do Componente do Mapa

Para exibir o mapa, adicione o componente <google-map> no template. Este componente requer um mapId, que é o identificador do seu mapa na API do Google.

No app.component.ts, configure as opções de exibição do mapa:

options: google.maps.MapOptions = {
  mapId: "DEMO_MAP_ID",
  center: { lat: -22, lng: -54 },
  zoom: 10,
};

No template do componente (app.component.html):

<google-map height="100%" width="101%" [options]="options"></google-map>

5. Configuração dos Imports

Certifique-se de importar GoogleMapsModule no componente onde o mapa será utilizado. No exemplo abaixo, ele é importado no app-home:

import { GoogleMapsModule } from "@angular/google-maps";

@Component({
  selector: 'app-home',
  standalone: true,
  imports: [..., GoogleMapsModule],
  templateUrl: './home.component.html',
  styleUrl: './home.component.css'
})

6. Adição da API Key do Google Maps

No index.html, adicione o script de inicialização com a sua chave de API:

<body>
	<script>
	(g => { var h, a, k, p = "The Google Maps JavaScript API", c = "google", l = "importLibrary", q = "__ib__", m = document, b = window; b = b[c] || (b[c] = {}); var d = b.maps || (b.maps = {}), r = new Set, e = new URLSearchParams, u = () => h || (h = new Promise(async (f, n) => { await (a = m.createElement("script")); e.set("libraries", [...r] + ""); for (k in g) e.set(k.replace(/[A-Z]/g, t => "_" + t[0].toLowerCase()), g[k]); e.set("callback", c + ".maps." + q); a.src = `https://maps.${c}apis.com/maps/api/js?` + e; d[q] = f; a.onerror = () => h = n(Error(p + " could not load.")); a.nonce = m.querySelector("script[nonce]")?.nonce || ""; m.head.append(a) })); d[l] ? console.warn(p + " only loads once. Ignoring:", g) : d[l] = (f, ...n) => r.add(f) && u().then(() => d[l](f, ...n)) })({
	  v: "weekly",
	  key: "SUA_CHAVE_API_AQUI"
	});
	
	</script>
</body>

7. Adição de Marcadores

Para adicionar marcadores de pontos turísticos brasileiros, crie arrays com as localizações:

brLocations_1: any[] = [
    { lat: -22.951916, lng: -43.210487 }, // Cristo Redentor, Rio de Janeiro
    { lat: -25.6953, lng: -54.4367 },      // Cataratas do Iguaçu, Paraná
    { lat: -22.9068, lng: -43.1729 },      // Pão de Açúcar, Rio de Janeiro
    { lat: -12.9714, lng: -38.5014 },      // Pelourinho, Salvador
    { lat: -3.119027, lng: -60.021731 },   // Teatro Amazonas, Manaus
  ];

  brLocations_2: any[] = [
    { lat: -23.5515, lng: -46.6333 },       // Avenida Paulista, São Paulo
    { lat: -20.4697, lng: -54.6201 },       // Bonito, Mato Grosso do Sul
    { lat: -21.136, lng: -44.2619 },        // Inhotim, Minas Gerais
    { lat: -22.795, lng: -43.1784 },        // Museu Imperial, Petrópolis
    { lat: -25.5477, lng: -54.5885 },       // Parque Nacional do Iguaçu, Paraná
    { lat: -22.9056, lng: -43.1344 },       // Maracanã, Rio de Janeiro
    { lat: -13.1631, lng: -74.2235 },       // Elevador Lacerda, Salvador
    { lat: -15.7998, lng: -47.8645 },       // Congresso Nacional, Brasília
    { lat: -8.0088, lng: -34.8545 },        // Recife Antigo, Recife
    { lat: -22.9714, lng: -44.3037 },       // Parque Nacional da Serra dos Órgãos, Teresópolis
    { lat: -23.9888, lng: -46.2577 },       // Santos Beach, São Paulo
    { lat: -23.9651, lng: -46.3264 },       // Praia de Juquehy, São Sebastião
    { lat: -23.5711, lng: -46.7016 },       // Parque Ibirapuera, São Paulo
    { lat: -2.5588, lng: -44.2737 },        // Lençóis Maranhenses, Maranhão
    { lat: -30.0346, lng: -51.2177 },       // Mercado Público de Porto Alegre, Porto Alegre
    { lat: -25.4278, lng: -49.2731 },       // Jardim Botânico, Curitiba
    { lat: -8.4072, lng: -37.0634 },        // Vale do Catimbau, Pernambuco
    { lat: -16.0044, lng: -48.0551 },       // Chapada dos Veadeiros, Goiás
  ];

No template, utilize um for para iterar sobre os arrays e adicionar os marcadores:

<google-map height="100%" width="100%" [options]="options">
  <ng-container *ngFor="let location of brLocations_1">
    <map-advanced-marker [position]="{ lat: location.lat, lng: location.lng }"></map-advanced-marker>
  </ng-container>
  <ng-container *ngFor="let location of brLocations_2">
    <map-advanced-marker [position]="{ lat: location.lat, lng: location.lng }"></map-advanced-marker>
  </ng-container>
</google-map>

8. Executando e Visualizando o Projeto

Para rodar o projeto e visualizar o mapa com os marcadores, execute:

ng serve

9. Resultado Final

Após seguir os passos, seu mapa com os marcadores dos pontos turísticos brasileiros estará disponível no navegador, semelhante ao exemplo abaixo: