react-native-google-maps-plus

React Native wrapper for Android & iOS Google Maps SDK.

Installation

react-native-nitro-modules is required as this library relies on Nitro Modules.

yarn add react-native-google-maps-plus react-native-nitro-modules

iOS

Add this to your Podfile only for bare React Native apps. (Not required for Expo, handled by the config plugin.)

post_install do |installer|
  react_native_post_install(
      installer,
      config[:reactNativePath],
      :mac_catalyst_enabled => false,
      # :ccache_enabled => true
    )

  require_relative '../node_modules/react-native-google-maps-plus/scripts/svgkit_patch'
  apply_svgkit_patch(installer)
end

Expo Projects

Add your keys to the app.json. The config plugin automatically injects them into your native Android and iOS builds during expo prebuild.

{
  "expo": {
    "plugins": [
      [
        "react-native-google-maps-plus",
        {
          "googleMapsAndroidApiKey": "YOUR_ANDROID_MAPS_API_KEY",
          "googleMapsIosApiKey": "YOUR_IOS_MAPS_API_KEY"
        }
      ]
    ]
  }
}

Setup API Key

You will need a valid Google Maps API Key from the Google Cloud Console.

Android

Note: These instructions apply to bare React Native apps only. Expo projects should use the config plugin instead (see Expo section above).

See the official Google Maps Android SDK configuration guide for more details.

iOS

Note: These instructions apply to bare React Native apps only. Expo projects should use the config plugin instead (see Expo section above).

See the official Google Maps iOS SDK configuration guide for more details.

Dependencies & Native Documentation

This package is React Native wrapper around the official Google Maps SDKs. For full API behavior, configuration options, and feature reference, please consult the native documentation:

• iOS Google Maps SDK https://developers.google.com/maps/documentation/ios-sdk

• Android Google Maps SDK https://developers.google.com/maps/documentation/android-sdk

• Maps Utility Libraries (iOS & Android) https://developers.google.com/maps/documentation/ios-sdk/utility https://developers.google.com/maps/documentation/android-sdk/utility

• SVG Rendering (used for custom marker icons)

  • iOS: https://github.com/SVGKit/SVGKit
  • Android: https://bigbadaboom.github.io/androidsvg/

These libraries are automatically linked during installation. If you encounter build issues, try cleaning and rebuilding your native project.

Note: This package follows the native SDKs closely. Props and behavior match the underlying Google Maps APIs whenever possible.

Usage

Basic map:

import React from 'react';
import { GoogleMapsView } from 'react-native-google-maps-plus';

export default function App() {
  return (
    <GoogleMapsView
      style={{ flex: 1 }}
      initialProps={{
        camera: {
          center: { latitude: 37.7749, longitude: -122.4194 },
          zoom: 12,
        },
      }}
      markers={[
        {
          id: '1',
          zIndex: 1,
          coordinate: { latitude: 37.7749, longitude: -122.4194 },
        },
      ]}
    />
  );
}

Check out the example app in the example folder.

Contributing

• Development workflow
• Sending a pull request
• Code of conduct

License

MIT

---

Made with create-react-native-library