Utilizando Google Maps API no React Native
Tags: reactnative, programming
Published: 2023-04-05 19:51:29

O React Native é uma plataforma de desenvolvimento de aplicativos móveis híbridos que permite aos desenvolvedores criar aplicativos para iOS e Android usando JavaScript e React. Um recurso importante para muitos aplicativos móveis é a capacidade de obter a localização atual do usuário. Felizmente, o Google Maps oferece uma API que pode ser integrada ao React Native para fornecer essa funcionalidade.

Neste artigo, vamos explorar como usar a API do Google Maps em um projeto real de React Native para buscar a localização atual do usuário.


**Pré-requisitos -**

Antes de começarmos, é necessário que você tenha algumas coisas instaladas em seu sistema:

- Node.js e npm (ou Yarn)
- React Native CLI
- Uma conta do Google Cloud Platform com uma chave de API do Google Maps

Se você não tiver uma conta do Google Cloud Platform, pode criar uma gratuitamente e seguir as instruções para obter uma chave de API do Google Maps (https://developers.google.com/maps/gmp-get-started?hl=pt-br#create-project).

Para criar uma chave de API do Google Maps, siga os seguintes passos:


- Acesse o Console de APIs do Google em https://console.developers.google.com/.
- Selecione um projeto existente ou crie um novo.
- Na página "Dashboard", clique em "Ativar APIs e serviços".
- Procure "Maps JavaScript API" e "Places API" e ative-as.
- Clique em "Criar credenciais".
- Selecione "Chave de API".
- Na página "Crie uma chave de API", forneça um nome para sua chave de API (por exemplo, "Minha chave de API do Google Maps").
- Se desejar, especifique as restrições de uso da chave de API.
- Clique em "Criar

Após seguir esses passos, você terá criado uma chave de API do Google Maps. Certifique-se de mantê-la em segurança e não compartilhá-la com ninguém que não precise dela, pois a chave de API é usada para acessar os serviços do Google Maps e pode estar associada a cobranças ou limitações de uso.



(Neste artigo não usarei uma chave real, fiz o procedimento acima, porém em casos de uso da api onde seria utilizada por outras pessoas o produto será cobrado, e preferi não inserir meus dados. Trocarei por: COLOQUE_SUA_CHAVE_DE_API_AQUI)


**Inciando o projeto em React -**

Para criar um novo projeto React Native, abra o terminal e execute o seguinte comando:


```
npx react-native init MapsApp
```

**Instalando dependências no projeto -**

Agora, precisamos instalar algumas dependências para nosso projeto. Abra o terminal e execute os seguintes comandos:

```
npm install @react-native-community/geolocation
npm install @react-native-maps
npm install dotenv
npm install axios
```

O pacote @react-native-community/geolocation nos permitirá acessar a localização do usuário, o pacote @react-native-maps nos permitirá integrar o Google Maps em nosso aplicativo, o pacote dotenv nos permitirá armazenar nossas credenciais de API com segurança e o pacote axios nos permitirá fazer solicitações HTTP para nossa API.

**Configurando a API do Google Maps -**

Agora que temos as dependências instaladas, precisamos configurar nossa chave de API do Google Maps. Crie um arquivo `.env` na raiz do projeto e adicione o seguinte:

```
API_KEY=COLOQUE_SUA_CHAVE_DE_API_AQUI
```

**Integrando o Google Maps em nosso aplicativo -**

Vamos criar uma tela de mapa para mostrar a localização atual do usuário e alguns marcadores no mapa. Crie um novo arquivo chamado MapScreen.js na pasta screens e adicione o seguinte código:

```
import React, { useState, useEffect } from 'react';
import { StyleSheet, View } from 'react-native';
import MapView, { Marker } from 'react-native-maps';
import Geolocation from '@react-native-community/geolocation';
import axios from 'axios';
import { API_KEY } from '@env';

const MapScreen = () => {
  const [location, setLocation] = useState(null);
  const [places, setPlaces] = useState([]);

  useEffect(() => {
    Geolocation.getCurrentPosition(
      position => {
        const { latitude, longitude } = position.coords;
        setLocation({ latitude, longitude });
      },
      error => {
        console.log(error);
      },
      { enableHighAccuracy: true, timeout: 20000, maximumAge: 1000 }
    );
  }, []);

  useEffect(() => {
    if (location) {
      axios
        .get(
          `https://maps.googleapis.com/maps/api/place/nearbysearch/json?location=${location.latitude},${location.longitude}&radius=500&type=restaurant&key=${API_KEY}`
        )
        .then(response => {
          setPlaces(response.data.results);
        })
        .catch(error => {
          console.log(error);
        });
    }
  }, [location]);

  return (
    <View style={styles.container}>
      {location && (
        <MapView
          style={styles.map}
          region={{
            latitude: location.latitude,
            longitude: location.longitude,
            latitudeDelta: 0.01,
            longitudeDelta: 0.01,
          }}>
          <Marker
            coordinate={{
              latitude: location.latitude,
              longitude: location.longitude,
            }}
            title="Sua localização"
          />
          {places.map(place => (
            <Marker
              key={place.id}
              coordinate={{
                latitude: place.geometry.location.lat,
                longitude: place.geometry.location.lng,
              }}
              title={place.name}
              description={place.vicinity}
            />
          ))}
        </MapView>
      )}
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    alignItems: 'center',
    justifyContent: 'center',
  },
  map: {
    ...StyleSheet.absoluteFillObject,
  },
});

export default MapScreen;
```

Este código começa importando as dependências que precisamos, incluindo o MapView e o Marker do react-native-maps, o Geolocation do @react-native-community/geolocation, o axios para fazer solicitações HTTP e nossa chave de API do Google Maps do arquivo .env.

O componente MapScreen começa declarando dois estados com useState(): location e places. location é a localização atual do usuário, enquanto places é uma lista de lugares nas proximidades.

Em seguida, usamos o useEffect() para obter a localização atual do usuário usando Geolocation.getCurrentPosition() do @react-native-community/geolocation. Se a localização for obtida com sucesso, ela é armazenada no estado location.

Em outro useEffect(), usamos a localização do usuário para fazer uma solicitação HTTP à API do Google Places. A solicitação é feita usando axios.get() e a URL da API.


Espero que esse artigo tenha lhe ajudado a compreender o uso de API do Google Maps, que é muito útil para encontrar uma localização em tempo real e percorrer o planeta