Instructions for manually installing Google Maps for react-native-maps

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

Install Google Maps for iOS manually for 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

After installing react-native-maps from npm:

1. Drag this folder node_modules/react-native-maps/lib/ios/AirGoogleMaps/ into your project, and choose Create groups in the popup window.

2. In xcode, right click on Libraries -> Add files to [your project], and navigate to and add node_modules/react-native-maps/lib/ios/AirMaps.xcodeproj. Select Copy files is necessary and Create groups.

3. Download the Google Maps iOS SDK, and follow the instructions here to link the libraries (note I didn't have to follow the instructions in step 8): https://developers.google.com/maps/documentation/ios-sdk/start

4. Enable your Google API Key: https://developers.google.com/maps/documentation/android-api/signup#release-cert

5. In AppDelegate.m add two lines of code:

• before @implementation AppDelegate

  • add @import GoogleMaps;

• inside (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

6. Go back to xCode, click on the project name, then click on Build Settings

7. Scroll down to section Search Paths

• double click on Header Search Path - url on the right

• press the small plus icon in the left corner

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

8. You are all set now!

9. Go back to your code and add some initial map, for example (index.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 {
  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);

10. Run react-native run-ios