4 exemplos de utilização do Google Maps/Geolocalização com Ionic

Nessa aula eu vou te mostrar 4 exemplos de utilização do Google Maps/Geolocalização com o Ionic.
Você vai aprender:

  • Exibir mapas estáticos
  • Exibir mapas dinâmicos
  • Recuperar a localização do usuário e exibir no mapa
  • Traçar rotas entre dois pontos distintos

 

Esse tutorial está utilizando as seguintes versões das dependências:

  • Ionic: 3.19.0

 

O que é o Google Maps

O Google Maps é um serviço de mapas do Google onde é possível buscar endereços, lugares e traçar rotas.

 

O que é Geolocalização

Basicamente Geolocalização é prover serviços personalizados com base na localização do usuário.

 

Obter uma chave de API

  1. Acesse Google API Console.
  2. Crie ou selecione um projeto.
  3. Clique em Continue para ativar a API e serviços relacionados.
  4. Na página Credentials, obtenha uma chave de API.
  5. Copie o código gerado para ser usado mais tarde nesse tutorial.

Você pode acessar a documentação do Google para gerar uma chave de API clicando aqui.

 

Criando uma aplicação de exemplo

O passo a passo abaixo é o mesmo mostrado no vídeo.

  • Passo 1: Criar o aplicativo.
  • Passo 2: Instalar o plugin de geolocalização do Ionic Native.
  • Passo 3: Adicionar a API do Google Maps
  • Passo 4: Criar as páginas.

 

Passo 1: Criar o aplicativo

 

Passo 2: Instalar o plugin de geolocalização do Ionic Native

 

No arquivo app.module.ts adicionar a o provider “Geolocation

 

Passo 3: Adicionar a API do Google Maps

Adicionar o script abaixo no arquivo index.html

 

Arquivo index.html completo

 

Passo 4: Criar as páginas

Página Exemplo1

Arquivo exemplo1.ts

 

Arquivo exemplo1.html

 

Página Exemplo2

Arquivo exemplo2.ts

 

Arquivo exemplo2.html

 

Arquivo exemplo2.scss

 

Página Exemplo3

Arquivo exemplo3.ts

 

Arquivo exemplo3.html

 

Arquivo exemplo3.scss

 

Página Exemplo4

Arquivo exemplo4.ts

 

Arquivo exemplo4.html

 

Arquivo exemplo4.scss

 

Clique no botão abaixo para ver o código fonte gerado nessa aula

Código fonte gerado na aula

 

Referências

 

Gostou desse artigo? Aproveite e curta e compartilhe para que mais pessoas possam também visualiza-lo!

Ainda ficou alguma dúvida ou tem alguma sugestão? Deixa aí nos comentários!