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
Top comments (0)