Menú

PlayAgain

Javascript, React Native, programación y reviews

Usar Google Maps con react-native-maps en React Native iOS/Android

google-maps-react-native

Instalación de Google Maps para React Native en iOS

Crearemos un nuevo proyecto, si no estamos utilizando uno.
Instalamos react-native-maps de Airbnb
Enlazar el modulo con React Native

Instalar Cocoapods (si lo tenemos podemos saltar este paso)
Configuramos el proyecto en iOS

Se ha generado un archivo Podfile y lo abriremos en nuestro editor favorito.
Remplazaremos el contenido por el siguiente

Modificaremos donde pone target ‘googleMapsAirbnb’ do y pondremos target ‘nombre de nuestra aplicación’ do

Instalamos el Podfile
Abrimos el proyecto

Y copiamos la carpeta AirGoogleMaps que se encuentra dentro de /node_modules/react-native-maps/lib/ios al proyecto xcworkspace que tenemos abierto en el Xcode.

Activamos la api Google Maps iOS y Google Maps Android.

– Para ello iremos a la consola de Google

– Crearemos un nuevo proyecto.


Y clicaremos en Google Maps SDK for iOS y nos darán las credenciales de la API.

Editamos el archivo AppDelegate.m

Ahora para poder utilizar esas credenciales iremos al Xcode y modificaremos el archivo AppDelegate.m de la siguiente forma:

Ahora iremos a Product -> Clean y luego Product -> Build para ejecutar nuestra aplicación.

Y ya tenemos instalado react-native-maps con Google Maps en iOS.

Instalación de Google Maps para React Native en Android

Crearemos un nuevo proyecto, si no estamos utilizando uno.
Instalamos react-native-maps de Airbnb
Enlazar el modulo con React Native
Activamos la api Google Maps iOS y Google Maps Android.

– Para ello iremos a la consola de Google

– Crearemos un nuevo proyecto.


Y clicaremos en Google Map Android API y nos darán las credenciales de la API.

Copia las siguientes lineas en android/app/build.gradle
Añade la key de la api de Google Maps en android/app/src/AndroidManifest.xml

Utilización de Google Maps en React Native