Need help to use Google Maps on iOS

[therealgilles]

I am trying to understand what I have to do to use Google Maps on iOS. I am using the ignite boilerplate for react-native. My xcode libraries folder is shown in the screenshot below.

How and where should I add the AirGoogleMaps folder? and what, if anything else, do I have to do? Any help will be very much appreciated.

[therealgilles]

I got Google Maps on ios working. Here is how I did it, hopefully this will help a few people out there struggling with this:

REPLACE MyApp BY YOUR APP NAME IN THE FOLLOWING

1. Create a Podfile under your application ios directory (see ios/Podfile below).

2. Update MyApp/ios/MyApp/AppDelegate.m to include your google API key (see AppDelegate.m extract below).

3. Run the following from your dir:

  # build all node modules
  npm install

  # fix react-native-maps (somewhat the react-native-maps installed by npm install is broken, even though the version number is the same, ie 0.11.0)
  cd node_modules
  /bin/rm -rf react-native-maps
  git clone https://github.com/airbnb/react-native-maps
  cd react-native-maps
  npm install
  /bin/rm -rf .git*
  cd ..

  # copy AirGoogleMaps & AirMaps to ios directory (AirMaps may not be necessary)
  cd ios
  /bin/rm -rf AirGoogleMaps AirMaps
  /bin/cp -r ../node_modules/react-native-maps/ios/AirGoogleMaps .
  /bin/cp -r ../node_modules/react-native-maps/ios/AirMaps .
  cd ..

  # install pods
  gem install bundler
  cd ios
  bundle install
  /bin/rm -rf Podfile.lock Pods
  bundle exec pod install --verbose
  cd ..

  # link and run
  react-native link
  react-native run-ios

4. Add provider to your MapView:

    <MapView
         provider={MapView.PROVIDER_GOOGLE}
         ...

That should be it. If your maps page appears blank, you have a problem connecting to the google API. It's either your API key setup (in AppDelegate.m or in the Google API console), or you have something blocking your app traffic (like Little Snitch).

--- ios/Podfile ---

# You Podfile should look similar to this file. Whether you use_frameworks! or not, the following configuration should work.
#
# However if you DO NOT use_frameworks! and you prefer to install pods instead of
# dragging the AirMaps directory into your project, refer to the comments below (steps 1~4)

source 'https://github.com/CocoaPods/Specs.git'
# specific your target ios version here
platform :ios, '10.0'
use_frameworks!

target '<put_your_app_name_here>' do
  pod 'React', path: '../node_modules/react-native', :subspecs => [
    'Core',
    'RCTActionSheet',
    'RCTGeolocation',
    'RCTImage',
    'RCTLinkingIOS',
    'RCTNetwork',
    'RCTSettings',
    'RCTText',
    'RCTVibration',
    'RCTWebSocket'
  ]

  pod 'GoogleMaps'

  # add if you have a subproject like <app>Tests
  #target '<put_your_app_subproject_name_here>' do
  #  inherit! :search_paths
  #  pod 'GoogleMaps'
  #end
end

--- MyApp/ios/MyApp/AppDelegate.m extract ---

...
#import "AppDelegate.h"

#import "RCTBundleURLProvider.h"
#import "RCTRootView.h"
/* Add google maps header */
#import <GoogleMaps/GoogleMaps.h>
/* Add this if using react-native-config */
#import "ReactNativeConfig.h"

@implementation AppDelegate

- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions
{
  NSURL *jsCodeLocation;

  /* Add this if using react-native-config */
  /* Google Maps API key */
  NSString *googleAPIKey = [ReactNativeConfig envFor:@"GOOGLE_KEY"];
  [GMSServices provideAPIKey:googleAPIKey];

  /* Add this if NOT using react-native-config */
  /* Register your API key */
  [GMSServices provideAPIKey:@"<insert_your_Google_maps_API_key_here>"];
...

[cuongv]

I tried to run those steps, but it show:

Btw, we can not use MapPolyline with google map? how can i draw line on google map?

Thanks in advance!

[therealgilles]

What code are you using to display the map view?

[cuongv]

Here's my code:

<MapView
ref="map"
provider={MapView.PROVIDER_GOOGLE}
style={styles.map}
initialRegion={this.props.region}
showsUserLocation={true}
onRegionChangeComplete={(region) => {
//this.props.changeRegion(region);
}}
>

[therealgilles]

Can you check if your version of react-native-maps matches the master branch of the repo below?
https://github.com/therealgilles/react-native-maps

It looks like that the version you are using does not have support for the animateToRegion function (which I know is supported for Google Maps if you use the correct version).

[cuongv]

I just checked. My version is 0.11.0 (latest one). Is there any chance that i made mistake when install google map?

[therealgilles]

Just getting the latest version (0.11.0) with a regular install won't work. I think npm install does not pull the master branch, which has the latest changes, but another branch instead.

Did you follow these instructions?

# fix react-native-maps (somewhat the react-native-maps installed by npm install is broken, even though the version number is the same, ie 0.11.0)
  cd node_modules
  /bin/rm -rf react-native-maps
  git clone https://github.com/airbnb/react-native-maps
  cd react-native-maps
  npm install
  /bin/rm -rf .git*
  cd ..

[cuongv]

You are right! npm did not get the proper version. After i clone it again, it works like a charm. Thank you very much.
But the icon for "user current location" look bad. Is it the same with you ?

[therealgilles]

Yes, it's the same for me but that's not a real problem, it's just a display glitch on the simulator. It looks normal when ran on the phone. Glad I could help!

[cuongv]

yes, it looks good on devices. Thank you. Btw, is this possible to move Google logo from bottom to top? I have one button in the bottom that may overlay google logo.

[therealgilles]

I don't think it's possible to move the logo. That's also where it is on the Google Maps app on iOS.

[cuongv]

hmm, i saw one app can did it, i think it still possible to do it.

[therealgilles]

Is that a react-native app? There may be more options on native iOS. I would suggest to ask the developers if you can.

[cuongv]

yeah, it's may a native map. ill try to contact developers.