Map View

1. Instalação

1.1. npx expo install react-native-maps

2. Usage

2.1. import React from 'react'; import MapView from 'react-native-maps'; import { StyleSheet, View } from 'react-native'; export default function App() { return ( <View style={styles.container}> <MapView style={styles.map} /> </View> ); } const styles = StyleSheet.create({ container: { flex: 1, }, map: { width: '100%', height: '100%', }, });

3. Usando no Android

3.1. 1 - Registre um projeto de API do Google Cloud e ative o SDK do Maps para Android Abra seu navegador no Google API Manager e crie um projeto. Depois de criado, vá para o projeto e habilite o SDK do Maps para Android.

3.2. 2 - Copie a impressão digital do certificado SHA-1 do seu aplicativo Se você estiver implantando seu aplicativo na Google Play Store, precisará carregar o binário do aplicativo no console do Google Play pelo menos uma vez. Isso é necessário para que o Google gere suas credenciais de assinatura de aplicativo. Acesse Google Play Console > (seu aplicativo) > Versão > Configuração > Integridade do aplicativo > Assinatura do aplicativo. Copie o valor da impressão digital do certificado SHA-1.

3.3. 3 - Criar uma chave de API Acesse o gerenciador de credenciais do Google Cloud e clique em Criar credenciais e em Chave de API. No modal, clique em Editar chave de API. Em Restrições de chave > Restrições de aplicativos, escolha Aplicativos Android. Em Restringir o uso aos seus aplicativos Android, clique em Adicionar um item. Adicione seu android.package de app.json (por exemplo: com.company.myapp) ao campo de nome do pacote. Em seguida, adicione o valor da impressão digital do certificado SHA-1 da etapa 2. Clique em Concluído e, em seguida, clique em Salvar.

3.4. 4 - Adicione a chave de API ao seu projeto Copie sua chave de API em seu app.json no campo android.config.googleMaps.apiKey. Em seu código, importe { PROVIDER_GOOGLE } de react-native-maps e adicione a propriedade provider=PROVIDER_GOOGLE ao seu <MapView>. Esta propriedade funciona em Android e iOS. Recrie o binário do aplicativo (ou reenvie para a Google Play Store caso seu aplicativo já tenha sido carregado). Uma maneira fácil de testar se a configuração foi bem-sucedida é criar um emulador.

4. Usando no IOS

4.1. 1- Registre um projeto de API do Google Cloud e ative o SDK do Maps para iOS Abra seu navegador no Google API Manager e crie um projeto. Em seguida, vá para o projeto, clique em Ativar APIs e serviços e ative o Maps SDK for iOS.

4.2. 2 - Criar uma chave de API Acesse o gerenciador de credenciais do Google Cloud e clique em Criar credenciais e em Chave de API. No modal, clique em Editar chave de API. Em Restrições de chave > Restrições de aplicativos, escolha Aplicativos iOS. Em Aceitar solicitações de um aplicativo iOS com um desses identificadores de pacote, clique no botão Adicionar um item. Adicione seu ios.bundleIdentifier de app.json (por exemplo: com.company.myapp) ao campo de ID do pacote. Clique em Concluído e, em seguida, clique em Salvar.

4.3. 3 - Adicione a chave de API ao seu projeto Copie sua chave de API para app.json no campo ios.config.googleMapsApiKey. Em seu código, importe { PROVIDER_GOOGLE } de react-native-maps e adicione a propriedade provider=PROVIDER_GOOGLE ao seu <MapView>. Esta propriedade funciona em Android e iOS. Recrie o binário do aplicativo. Uma maneira fácil de testar se a configuração foi bem-sucedida é criar um simulador.