How to set up Google Maps in React Native iOS

Hi Guys, In this article we are going to learn about how to set up Google Maps in React Native iOS. React Native uses third-party dependency to render maps in the Application. we are going to implement react-native-maps dependency in our application to show maps. Let’s understand steps to implement this dependency because I was facing multiple issues during setting up Google Maps in iOS.

1. Install react-native-maps

Use the following comment to install maps in the React-native project

npm install react-native-maps

//or 

yarn add react-native-maps

Add the following support dependencies in your Podfile.

pod 'Google-Maps-iOS-Utils', '~> 4.2.2'
rn_maps_path = '../node_modules/react-native-maps'
pod 'react-native-google-maps', :path => rn_maps_path

2. Set up minimum ios platform version

To use react-native-maps you must set iOS platform version > 13.0. You can set this in Podfile & Project General Minimum deployment version.

In Podfile set to minimum platform version to 13.0 or above as below

platform :ios, '14.7'

Set up the same version in the Project General Minimum deployment version as below

3. Run Pod install

Run Pod install in the iOS folder after the above points. it will install all required pods which use to display maps in React native application.

4. Enable Google Maps in AppDelegate.m

Import and add the following to enable Google map in the iOS app. Also, you have to set up Project on the Google API console to get the Google Map API key 

#import "AppDelegate.h"
#import <GoogleMaps/GoogleMaps.h>.  //<-- Import this

Add the Google API key in didFinishLaunchingWithOptions function in AppDelegate.m

@implementation AppDelegate

- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions
{
 [GMSServices provideAPIKey:@"_GOOGLE_MAP_KEY_"];    //<-- Add this
 
 ...

5. Google-Maps-iOS-Utils/GMUHeatmapTileLayer.h file not found

If you face this error in xCode.

Just remove Google-Maps-iOS-Utils from imports as below

6. Google-Maps-iOS-Utils/GMUKMLParser.h’ file not found

If you face this error
Just remove Google-Maps-iOS-Utils from imports as below

7. Add the following in post_install in Podfile

Add the following code in your podfile post_install section and then run pod install. this will help you to fix some more errors like RCTConvert+AirMap.h file not found.

if target.name == 'react-native-google-maps'
           target.build_configurations.each do |config|
             config.build_settings['CLANG_ENABLE_MODULES'] = 'No'
             paths = Array["\"$(inherited)\"", "\"$(SRCROOT)/Google-Maps-iOS-Utils/src/Heatmap\""]
                           config.build_settings['HEADER_SEARCH_PATHS'] = paths.uniq
                           puts config.build_settings['HEADER_SEARCH_PATHS']
           end
         end

8. Podfile

I am sharing my podfile code so that you will get a clear understanding of the react-native-maps iOS setup

require_relative '../node_modules/react-native/scripts/react_native_pods'
require_relative '../node_modules/@react-native-community/cli-platform-ios/native_modules'
$RNFirebaseAsStaticFramework = true
config = use_frameworks! :linkage => :static

platform :ios, '14.7'

target 'DemoApp' do
  
  config = use_native_modules!
  pod 'Google-Maps-iOS-Utils', :git => 'https://github.com/Simon-TechForm/google-maps-ios-utils.git', :branch => 'feat/support-apple-silicon'

  rn_maps_path = '../node_modules/react-native-maps'
  pod 'react-native-google-maps', :path => rn_maps_path


  use_react_native!(
    :path => config[:reactNativePath],
    # to enable hermes on iOS, change `false` to `true` and then install pods
    :hermes_enabled => false
  )

  target 'DemoAppTests' do
    inherit! :complete
    # Pods for testing
  end

  # Enables Flipper.
  #
  # Note that if you have use_frameworks! enabled, Flipper will not work and
  # you should disable the next line.
  #use_flipper!()


 # pre_install do |installer|
    # workaround for https://github.com/CocoaPods/CocoaPods/issues/3289
 #   Pod::Installer::Xcode::TargetValidator.send(:define_method, :verify_no_static_framework_transitive_dependencies) {}
   
#  end
pre_install do |installer|
    installer.pod_targets.each do |pod|
      if pod.name.eql?('react-native-razorpay')
        def pod.build_type
          Pod::BuildType.static_library
        end
      end
    end
  end

  post_install do |installer|
    react_native_post_install(installer)
    
    installer.pods_project.targets.each do |target|
      target.build_configurations.each do |config|
        config.build_settings['BUILD_LIBRARY_FOR_DISTRIBUTION'] = 'YES'
      end
      installer.pods_project.build_configurations.each do |config|
            config.build_settings["EXCLUDED_ARCHS[sdk=iphonesimulator*]"] = "arm64"
          end
      if target.name == 'react-native-google-maps'
              target.build_configurations.each do |config|
                config.build_settings['CLANG_ENABLE_MODULES'] = 'No'
                paths = Array["\"$(inherited)\"", "\"$(SRCROOT)/Google-Maps-iOS-Utils/src/Heatmap\""]
                config.build_settings['HEADER_SEARCH_PATHS'] = paths.uniq
                puts config.build_settings['HEADER_SEARCH_PATHS']
              end
            end
      if (target.name&.eql?('FBReactNativeSpec'))
        target.build_phases.each do |build_phase|
          if (build_phase.respond_to?(:name) && build_phase.name.eql?('[CP-User] Generate Specs'))
            target.build_phases.move(build_phase, 0)
          end
        end
      end
    end
  end
end

Hope this post will help you to set up Google Maps in React Native iOS

Thank you 🙂