Visual instructions how to enable Google Maps on IOS using react-native-maps

react-native-maps-enable-google-maps-instructions.md

Visual instructions how to enable Google Maps on IOS using react-native-maps

This is for my personal use, things might not be correctly explained here. For the official docs please check https://github.com/airbnb/react-native-maps

Steps from scratch:

1.react-native init GoogleMapPlayground

2. cd GoogleMapPlayground

3.npm install react-native-maps --save

4.Replace in package.json following:

"react-native-maps": "^0.12.4"

into:

"react-native-maps": ">=0.12.4"

5.Run npm update

6.react-native link

7.Create the Podfile file at ios/Podfile

(but before that you might also need to add cocoapods: gem install cocoapods, if you have permission issue add sudo)

touch ios/Podfile

8.Output of the Podfile file (important: for newest version of RN scroll down to the comments - there are few examples of updated Podfile )

# You Podfile should look similar to this file. React Native currently does not support use_frameworks!
source 'https://github.com/CocoaPods/Specs.git'

platform :ios, '8.0'

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

  pod 'GoogleMaps'  # <~~ remove this line if you do not want to support GoogleMaps on iOS

# when not using frameworks  we can do this instead of including the source files in our project (1/4):
#  pod 'react-native-maps', path: '../../'
#  pod 'react-native-google-maps', path: '../../'  # <~~ if you need GoogleMaps support on iOS
end

Replace the GoogleMapPlayground with your project name (this file is a copy version from official docs https://github.com/airbnb/react-native-maps/blob/master/example/ios/Podfile)

9.Navigate to cd ios and run pod install

10.cd ..

11.open ios/GoogleMapPlayground.xcworkspace

12.Project structure in xCode (picture 1)

13.Open your project (e.g from terminal: open .)

14.Drag this folder node_modules/react-native-maps/ios/AirGoogleMaps/ into your project, and choose Create groups in the popup window. (picture 2)

15.Your project structure should look like in (picture 3)

16.Enable your Google API Key - follow this link (READ SECTION AT THE BOTTOM - IMPORTANT): https://developers.google.com/maps/documentation/android-api/signup#release-cert

• press Get Key
• Create a new project or use an existing one (I used existing one for simplicity)

16.In ios/GoogleMapPlayground/AppDelegate.m add two lines of code:

• before the @implementation AppDelegate

  • add @import GoogleMaps;

• inside the (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions.....

  • add [GMSServices provideAPIKey:@"YOUR_GOOGLE_MAP_API_KEY"];

This is the example of AppDelegate.m

/**
 * Copyright (c) 2015-present, Facebook, Inc.
 * All rights reserved.
 *
 * This source code is licensed under the BSD-style license found in the
 * LICENSE file in the root directory of this source tree. An additional grant
 * of patent rights can be found in the PATENTS file in the same directory.
 */

#import "AppDelegate.h"

#import <React/RCTBundleURLProvider.h>
#import <React/RCTRootView.h>
@import GoogleMaps;

@implementation AppDelegate

- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions
{
  NSURL *jsCodeLocation;
  [GMSServices provideAPIKey:@"YOUR_GOOGLE_MAP_API_KEY"];
  jsCodeLocation = [[RCTBundleURLProvider sharedSettings] jsBundleURLForBundleRoot:@"index.ios" fallbackResource:nil];

  RCTRootView *rootView = [[RCTRootView alloc] initWithBundleURL:jsCodeLocation
                                                      moduleName:@"GoogleMapPlayground"
                                               initialProperties:nil
                                                   launchOptions:launchOptions];
  rootView.backgroundColor = [[UIColor alloc] initWithRed:1.0f green:1.0f blue:1.0f alpha:1];

  self.window = [[UIWindow alloc] initWithFrame:[UIScreen mainScreen].bounds];
  UIViewController *rootViewController = [UIViewController new];
  rootViewController.view = rootView;
  self.window.rootViewController = rootViewController;
  [self.window makeKeyAndVisible];
  return YES;
}

@end

17.Go back to xCode, click on the project name, then click on Build Settings (picture 4)

18.Scroll down to section Search Paths

• double click on Header Search Path - url on the right (picture 5)

• press the small plus icon in the left corner

• add $(SRCROOT)/../node_modules/react-native-maps/ios/AirMaps and change from non-recursive to recursive (picture 6)

19.You are all set now!

20.Go back to your code and add some initial map, for example (index.ios.js):

/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 * @flow
 */

import React, { Component } from 'react';
import {
  AppRegistry,
  StyleSheet,
  Dimensions,
  Text,
  View
} from 'react-native';

import MapView, { PROVIDER_GOOGLE } from 'react-native-maps';

const { width, height } = Dimensions.get('window');

const ASPECT_RATIO = width / height;
const LATITUDE = 37.78825;
const LONGITUDE = -122.4324;
const LATITUDE_DELTA = 0.0922;
const LONGITUDE_DELTA = LATITUDE_DELTA * ASPECT_RATIO;


class GoogleMapPlayground extends React.Component {
  constructor(props) {
    super(props);

    this.state = {
    };
  }

  render() {
    return (
      <View style={{ flex: 1 }}>
        <View style={{ backgroundColor: 'green', height: 100, justifyContent: 'center', alignItems: 'center'}}>
          <Text>Some div</Text>
        </View>
        <View style={styles.container}>
          <MapView
            provider={PROVIDER_GOOGLE}
            style={styles.map}
            initialRegion={{
              latitude: LATITUDE,
              longitude: LONGITUDE,
              latitudeDelta: LATITUDE_DELTA,
              longitudeDelta: LONGITUDE_DELTA,
            }}
          />
        </View>
      </View>
    );
  }
}

GoogleMapPlayground.propTypes = {
  provider: MapView.ProviderPropType,
};

const styles = StyleSheet.create({
  container: {
    ...StyleSheet.absoluteFillObject,
    top: 100,
    justifyContent: 'flex-end',
    alignItems: 'center'
  },
  map: {
     ...StyleSheet.absoluteFillObject,
  },
});

AppRegistry.registerComponent('GoogleMapPlayground', () => GoogleMapPlayground);

21.Run react-native run-ios

IMPORTANT!

Enabling API_KEY by following the link provided on point 16 - didn't work for me.

After successful build I had empty map (picture 8)

Follow these steps to enable the API_KEY:

• open this link: https://console.developers.google.com/flows/enableapi?apiid=maps_android_backend
• create or use your existing project (I used existing project)
• Go to credentials
• Add credentials to your project - pick Google Maps Android API (picture 9)
• Click on What credentials do I need
• I created new API key by following the link create new api... (picture 10)
• On the next screen (I chose - IOS apps) (picture 11) - Create (COPY YOUR NEW API KEY)
• Navigate to Library - on your left
• Click on Google Maps SDK for IOS (picture 12)
• Enable it (picture 13)

22.Replace new key with the old one if you were unsuccessful previously.

23.Run react-native run-ios again and hopefully you will see the map (picture 14)

x-images.png

x2-images.png

x3-img.png