CODEWITHSUNDEEP
iosreactjsgoogle-mapsreact-nativereact-native-maps
Cesár Hernández
Cesár Hernández

Reputation: 123

react-native-maps: AirGoogleMaps dir must be added to your xCode project to support GoogleMaps on iOS

I'm trying to use google maps on iOS and I get this error:

react-native-maps: AirGoogleMaps dir must be added to your xCode project to support GoogleMaps on iOS.

Error Image

I'm using react-native.maps https://github.com/react-community/react-native-maps

I followed the install instructions, in Android it worked perfectly but it doesn't in IOS

macOS: 10.14.1 (18B75)

dependencies {

"react": "16.5.0",

"react-native": "0.57.1",

"react-native-maps": "^0.22.1",

}

Upvotes: 12

Views: 24806

Answers (6)

Sebastian Flores
Sebastian Flores

Reputation: 1

For all my lazy fellas, absolutely no need to modify on Xcode, just type this:

{...(Platform.OS === 'android' ? { provider: PROVIDER_GOOGLE } : {})}

Place it where provider prop was and remember to put this IN ALL MapViews across your app to fix the error.

Your welcome.

Upvotes: 0

bharath s
bharath s

Reputation: 39

Integrating Google Maps into React Native Project

  1. Open your project in Xcode by navigating to iOS/{yourproject}.xcworkspace.

  2. In Xcode, go to Preferences > Locations tab. Click on the arrow next to Derived Data, then delete all derived data related to your project.

  3. Open the Podfile located in the ios directory of your project and add the following lines under the target {your project}:

     pod 'react-native-maps', :path => '../node_modules/react-native-maps'
 pod 'GoogleMaps'
 pod 'Google-Maps-iOS-Utils'

  4. Copy the AirGoogleMaps directory from node_modules/react-native-maps/ios and paste it into your Xcode project.

  5. Open AppDelegate.m (or AppDelegate.swift for Swift projects) and:

    1. Add #import <GoogleMaps/GoogleMaps.h> before @implementation AppDelegate.

    2. Add [GMSServices provideAPIKey:@"{API_KEY}"]; inside the didFinishLaunchingWithOptions method. Replace {API_KEY} with your actual API key from the Google Cloud Console.

      Example:

       (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions
     {
       [GMSServices provideAPIKey:@"{API_KEY}"];
       return YES;
     }

  6. In the ios directory, run pod install to install the necessary pods.

  7. In Xcode, go to Product > Clean Build Folder, then click Build. Once the build is complete, run your application.

Note: Ensure that the Google Maps iOS SDK is enabled in your Google Cloud Console. If you encounter any errors, please provide details about the error messages or logs for further assistance.

Upvotes: 3

Pascal Nitcheu
Pascal Nitcheu

Reputation: 799

Install the library react-native-maps. Follow the link instructions

https://github.com/react-native-maps/react-native-maps/blob/master/docs/installation.md

Upvotes: 1

Ismail Khan
Ismail Khan

Reputation: 169

ADD THIS CONDITION TO YOUR <MAPVIEW

provider={Platform.OS === 'android' ? PROVIDER_GOOGLE : PROVIDER_DEFAULT}

Upvotes: 15

Sami
Sami

Reputation: 425

Or, if the provider isn't important for you, just remove following prop in MapView:

provider={MapView.PROVIDER_GOOGLE}

It solved the issue for me

Upvotes: 5

wijuwiju
wijuwiju

Reputation: 307

ok I just had the same problem, so here is how i fixed it:

First follow this answer here:

https://github.com/react-community/react-native-maps/issues/693#issuecomment-262656417

Then you would need to go inside xcode > build settings > Preprocessor Macros > add HAVE_GOOGLE_MAPS=1

P.S inside actual component i used 

import MapView from "react-native-maps";

<MapView provider={MapView.PROVIDER_GOOGLE} style={styles.map} />

my styles > map: { position: "absolute", top: 0, left: 0, bottom: 0, right: 0 }

Hope this helps ;)

Upvotes: 11

Related Questions