Google Maps e reaja com um marcador personalizado

Nidhin Kumar em Level Up Your Code Seguir 6 de jul · 4 min ler

visão global

O Google Map React é um componente que envolve um conjunto de funcionalidades da API do Google Maps . Ele permite que você renderize qualquer componente React no Google Map.

Objetivos

  • Integrar o Google Maps com o React (Javascript e Typescript)
  • Obter a chave da API
  • Criando um marcador personalizado no mapa
  • Adicionando animações para os marcadores personalizados
  • Exibindo as opções do mapa do Google

Criação de Projetos

Vamos começar criando um aplicativo React usando o comando abaixo

 create-react-app map-example 
exemplo de mapa de cd
npm start

Se você gostaria de usar o TypeScript para o seu aplicativo React, use o comando abaixo

 create-react-app mapa-exemplo --typescript 
exemplo de mapa de cd
npm start

Instalando o componente do Google Maps

Agora vamos instalar a biblioteca google-map-react usando o comando abaixo.

 npm i google-map-react 

Se você estiver usando o TypeScript, instale os tipos para google-map-react usando o comando abaixo.

 npm i @ types / google-map-react 

Depois que os tipos são instalados, precisamos obter a chave da API.

Obter chave de API

Para mostrar os mapas, você precisará de uma chave de API para autenticar corretamente as chamadas.

Vá visitar a página da plataforma de mapas . Uma vez lá, clique em Primeiros passos e marque a caixa para Mapas. Em seguida, clique em Continuar

Em seguida, no menu suspenso, selecione seu nome do projeto. Clique em Próximo quando você for levado à página para ativar suas APIs. Agora você será levado à página a seguir que exibe sua chave de API

Copie a chave da API e adicione seu código e você poderá ver o mapa sendo exibido assim que executar o projeto usando o comando npm start

Integrando o Google Maps com o React com um componente simples

Crie um novo arquivo chamado simpleMap.tsx (para JS simpleMap.js ) e inclua o código abaixo

Criando um marcador personalizado no mapa

Agora vamos criar um marcador personalizado em vez do texto.

Crie um arquivo chamado Marker.tsx e adicione o código abaixo.

Crie um arquivo CSS chamado Marker.css e adicione o código abaixo.

Substitua o AnyReactComponent pelo componente Marker , como abaixo, em SimpleMapExample.tsx

Sua saída será como abaixo:

Agora você sabe como criar um marcador personalizado. Agora vamos animar o marcador.

Adicionando animações para os marcadores personalizados

Adicione o código abaixo em Marker.css .

Substitua o código abaixo em Marker.tsx .

Vamos ter a animação personalizada para o marcador como abaixo

Exibindo a Barra de opções do Google Map

Podemos mostrar a barra de opções nativa do Google Maps, como visualização de rua, controle de visualização de mapa. Você faz isso passando um objeto de opções para o componente do Google Maps.

Adicione as opções de mapa no SimpleMap.tsx como abaixo.

Agora você pode ver as seguintes alterações no seu mapa.

Parabéns, você criou um mapa simples com um marcador personalizado e uma animação no React. Explore mais com o plugin. Codificação feliz 🙂

Link de Referência

google-map-react

isomorphic google map react componente, permite renderizar reagir componentes no mapa google

www.npmjs.com

Texto original em inglês.