Skip to content
Closed
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
203 changes: 53 additions & 150 deletions CHANGELOG.md
Original file line number Diff line number Diff line change
@@ -1,176 +1,79 @@
## [1.1.0-dev.6](https://github.com/pinpong/react-native-google-maps-plus/compare/v1.1.0-dev.5...v1.1.0-dev.6) (2025-10-09)
## [1.1.0](https://github.com/pinpong/react-native-google-maps-plus/compare/v1.0.2...v1.1.0) (2025-10-08)

### ✨ Features

* add kml layer support ([4faf558](https://github.com/pinpong/react-native-google-maps-plus/commit/4faf558425831cc18a6e9c9e2d20ef0c4f42e702))
* add kml layer support ([35098bd](https://github.com/pinpong/react-native-google-maps-plus/commit/35098bd4c75b825f96f58696cbb37a4fcdebbdb8))

### 🛠️ Other changes

* **ci:** move PR template to root for auto-apply ([03e8a84](https://github.com/pinpong/react-native-google-maps-plus/commit/03e8a8438b0d5edab80fcdf2f2c8abf3372288c2))

## [1.1.0-dev.5](https://github.com/pinpong/react-native-google-maps-plus/compare/v1.1.0-dev.4...v1.1.0-dev.5) (2025-10-08)
* add heatmap support ([ddcfccf](https://github.com/pinpong/react-native-google-maps-plus/commit/ddcfccf4cbb08b2756c20ca7215a8fe45e30befb))
* add heatmap support ([96a3a08](https://github.com/pinpong/react-native-google-maps-plus/commit/96a3a08696e38f77db356d9e0e71a6e6b98a589f))
* add map ui settings support ([7921f49](https://github.com/pinpong/react-native-google-maps-plus/commit/7921f4941f6656fe9c588d4f5e9d1f5594632598))
* add mapCircle support ([8e32d14](https://github.com/pinpong/react-native-google-maps-plus/commit/8e32d14ae6d3e8254a46ffbb19fd3eb26575f46d))
* add mapId support ([75f73fa](https://github.com/pinpong/react-native-google-maps-plus/commit/75f73fac949f8e2a5112e1456226e60de8540474))
* add mapType ([754df51](https://github.com/pinpong/react-native-google-maps-plus/commit/754df51a8819ce5475d29262bbf95d8f0586393f))
* add mapType ([300614f](https://github.com/pinpong/react-native-google-maps-plus/commit/300614f22419f166c2482025f66b761145e75394))
* add mapType ([e32a3f5](https://github.com/pinpong/react-native-google-maps-plus/commit/e32a3f59fc1128b6a4c295d4e5d74d8afa7aa3cd))
* more map features ([796be0b](https://github.com/pinpong/react-native-google-maps-plus/commit/796be0b0976926f72b5d95b1ba5d2406988f4d9e))
* optional marker svg ([d9bd19d](https://github.com/pinpong/react-native-google-maps-plus/commit/d9bd19d72916ec697acc9cecc58219a3df8c5d54))
* optional marker svg ([#30](https://github.com/pinpong/react-native-google-maps-plus/issues/30)) ([5f8852c](https://github.com/pinpong/react-native-google-maps-plus/commit/5f8852c85741b75959f1d1e16240704cca042bb5))

### 🐛 Bug Fixes

* build script ([d1f11f2](https://github.com/pinpong/react-native-google-maps-plus/commit/d1f11f237900f929689b72dfb41054dac0790a37))
* release ([#18](https://github.com/pinpong/react-native-google-maps-plus/issues/18)) ([b271ccc](https://github.com/pinpong/react-native-google-maps-plus/commit/b271ccc69f9cb3e48c865801bdd104fd6065b557))

# react-native-google-maps-plus

[![npm version](https://img.shields.io/npm/v/react-native-google-maps-plus.svg?logo=npm&color=cb0000)](https://www.npmjs.com/package/react-native-google-maps-plus)
[![Dev Release](https://img.shields.io/npm/v/react-native-google-maps-plus/dev.svg?label=dev%20release&color=orange&logo=githubactions)](https://www.npmjs.com/package/react-native-google-maps-plus)
[![Release](https://github.com/pinpong/react-native-google-maps-plus/actions/workflows/release.yml/badge.svg)](https://github.com/pinpong/react-native-google-maps-plus/actions/workflows/release.yml)
[![Issues](https://img.shields.io/github/issues/pinpong/react-native-google-maps-plus?logo=github)](https://github.com/pinpong/react-native-google-maps-plus/issues)
[![License](https://img.shields.io/github/license/pinpong/react-native-google-maps-plus?logo=open-source-initiative&logoColor=green)](./LICENSE)
[![Code Style: Prettier](https://img.shields.io/badge/code_style-prettier-ff69b4.svg?logo=prettier&logoColor=white)](https://prettier.io/)
[![TypeScript](https://img.shields.io/badge/%3C/%3E-TypeScript-blue.svg?logo=typescript)](https://www.typescriptlang.org/)
[![Lint](https://img.shields.io/badge/lint-eslint-green.svg?logo=eslint&logoColor=white)](https://eslint.org/)
[![React Native](https://img.shields.io/badge/react--native-%3E%3D0.81.0-61dafb.svg?logo=react)](https://reactnative.dev/)
[![Platform: Android](https://img.shields.io/badge/platform-android-green.svg?logo=android&logoColor=white)](https://developer.android.com/)
[![Platform: iOS](https://img.shields.io/badge/platform-iOS-lightgrey.svg?logo=apple&logoColor=black)](https://developer.apple.com/ios/)

React-native wrapper for android & IOS google maps sdk

## Installation

`react-native-nitro-modules` is required as this library relies on [Nitro Modules](https://nitro.margelo.com/).

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

### Dependencies

This package builds on native libraries for SVG rendering and Google Maps integration:

- **iOS**: [SVGKit](https://github.com/SVGKit/SVGKit)
- **Android**: [AndroidSVG](https://bigbadaboom.github.io/androidsvg/)
- **iOS Maps SDK**: [Google Maps SDK for iOS](https://developers.google.com/maps/documentation/ios-sdk)
- **Android Maps SDK**: [Google Maps SDK for Android](https://developers.google.com/maps/documentation/android-sdk)
- **Maps Utility Libraries**: [Google Maps Utils for iOS](https://developers.google.com/maps/documentation/ios-sdk/utility) and [Google Maps Utils for Android](https://developers.google.com/maps/documentation/android-sdk/utility)

These are automatically linked when you install the package, but you may need to clean/rebuild your native projects after first install.

## Setup API Key

You will need a valid **Google Maps API Key** from the [Google Cloud Console](https://console.cloud.google.com/).

### Android

It's recommend to use [Secrets Gradle Plugin](https://developers.google.com/maps/documentation/android-sdk/secrets-gradle-plugin) to securely manage your Google Maps API Key.
* add ios privacy manifest ([175bfdf](https://github.com/pinpong/react-native-google-maps-plus/commit/175bfdf0a932aa7dcc789ac9287eb2e91a9d0bf6))
* add ios privacy manifest ([#31](https://github.com/pinpong/react-native-google-maps-plus/issues/31)) ([acc394e](https://github.com/pinpong/react-native-google-maps-plus/commit/acc394e49ca5bc9eaa5e67942fd2ed645dc2332c))
* dev package version ([ab9b581](https://github.com/pinpong/react-native-google-maps-plus/commit/ab9b581e7f571d09ffbe597cf8834234b43ee3a1))
* dev package version ([1317f23](https://github.com/pinpong/react-native-google-maps-plus/commit/1317f234d832a623c6e5dbce4dafd9154da73857))
* **example:** update Podfile.lock ([0eb9a09](https://github.com/pinpong/react-native-google-maps-plus/commit/0eb9a09bca8b13241b13851c4af0857545284229))

---
### 🔄 Code Refactors

### iOS
* **map:** unify update logic and defaults across Android and iOS ([cdaa01a](https://github.com/pinpong/react-native-google-maps-plus/commit/cdaa01af77ae93f9e9652dd018fe18f0ca6309b4))
* **map:** unify update logic and defaults across Android and iOS ([f15d638](https://github.com/pinpong/react-native-google-maps-plus/commit/f15d6388911943b5abdfd9d5f61e3423af33f064))
* nitrogen-patch.js ([20fbb0d](https://github.com/pinpong/react-native-google-maps-plus/commit/20fbb0d7bea58bd54ade53119dc510d0ce9b18f9))
* optional props ([9faa702](https://github.com/pinpong/react-native-google-maps-plus/commit/9faa7024c2bea0818734cb5831b93c4d360da0bd))

See the official [Google Maps iOS SDK configuration guide](https://developers.google.com/maps/documentation/ios-sdk/config#get-key) for more details.
### 📚 Documentation

1. Create a `Secrets.xcconfig` file inside the **ios/** folder:
* **readme:** update setup instructions ([9f88702](https://github.com/pinpong/react-native-google-maps-plus/commit/9f88702b187fde5c2e3d852f1d0aeeac48f8222b))

```properties
MAPS_API_KEY=YOUR_IOS_MAPS_API_KEY
```

Include it in your project configuration file:

```xcconfig
#include? "Secrets.xcconfig"
```

2. Reference the API key in your **Info.plist**:

```xml
<key>MAPS_API_KEY</key>
<string>$(MAPS_API_KEY)</string>
```

3. Provide the key programmatically in **AppDelegate.swift**:

```swift
import GoogleMaps

@UIApplicationMain
class AppDelegate: UIResponder, UIApplicationDelegate {
func application(_ application: UIApplication,
didFinishLaunchingWithOptions launchOptions: [UIApplication.LaunchOptionsKey: Any]?) -> Bool {
if let apiKey = Bundle.main.object(forInfoDictionaryKey: "MAPS_API_KEY") as? String {
GMSServices.provideAPIKey(apiKey)
}
return true
}
}
```

---

## Usage

Checkout the example app in the [example](./example) folder.

# Troubleshooting

## Android
### 🛠️ Other changes

- **API key not found**
Make sure `secrets.properties` exists under `android/` and contains your `MAPS_API_KEY`.
Run `./gradlew clean` and rebuild.
* add dev badge ([c8660b7](https://github.com/pinpong/react-native-google-maps-plus/commit/c8660b75581f447953fba6c9ec440146fcf8f48d))
* merge dev into main ([f851047](https://github.com/pinpong/react-native-google-maps-plus/commit/f8510472835ad5a861341652c6541477df205508))
* update .gitignore ([c15be5e](https://github.com/pinpong/react-native-google-maps-plus/commit/c15be5eb436d05f1f5a25fe7c8249e7c23eea3b2))
* update to react-native 0.82.0 ([31d5ff5](https://github.com/pinpong/react-native-google-maps-plus/commit/31d5ff5157ec8357b9d699d4dcc09bda09e11afb))
* update to react-native 0.82.0 ([8c8e8ae](https://github.com/pinpong/react-native-google-maps-plus/commit/8c8e8ae1c4fcf97e04059d873461f083e4c346cf))
* ## [1.0.2](https://github.com/pinpong/react-native-google-maps-plus/compare/v1.0.1...v1.0.2) (2025-10-02)

## iOS
### 🐛 Bug Fixes

- **`GMSServices must be configured before use`**
Ensure your key is in `Info.plist` and/or provided via `GMSServices.provideAPIKey(...)` in `AppDelegate.swift`.
* build script ([d1f11f2](https://github.com/pinpong/react-native-google-maps-plus/commit/d1f11f237900f929689b72dfb41054dac0790a37))
* build script ([98e194e](https://github.com/pinpong/react-native-google-maps-plus/commit/98e194e61d08af96ce75e156a6f5e3a5378c1b4c))
* name conflict ([faf8d5e](https://github.com/pinpong/react-native-google-maps-plus/commit/faf8d5e7a0f79bfceb8454510e8e5ad3771fdbd2))
* name conflict ([7217c11](https://github.com/pinpong/react-native-google-maps-plus/commit/7217c113bc2e5742bbc4b119eec7672c0b240cba))
* react type ([36e22d5](https://github.com/pinpong/react-native-google-maps-plus/commit/36e22d59f0746ad9759799465eefed8f66a19049))

- **Build fails with `Node.h` import error from SVGKit**
SVGKit uses a header `Node.h` which can conflict with iOS system headers.
You can patch it automatically in your **Podfile** inside the `post_install` hook:
## [1.0.1](https://github.com/pinpong/react-native-google-maps-plus/compare/v1.0.0...v1.0.1) (2025-10-02)

```ruby
post_install do |installer|
react_native_post_install(
installer,
config[:reactNativePath],
:mac_catalyst_enabled => false,
)
# Force iOS 16+ to avoid deployment target warnings
installer.pods_project.targets.each do |target|
target.build_configurations.each do |config|
config.build_settings['IPHONEOS_DEPLOYMENT_TARGET'] = '16.0'
end
end
### 🐛 Bug Fixes

# Patch SVGKit includes to avoid Node.h conflicts
require 'fileutils'
svgkit_path = File.join(installer.sandbox.pod_dir('SVGKit'), 'Source')
Dir.glob(File.join(svgkit_path, '**', '*.{h,m}')).each do |file|
FileUtils.chmod("u+w", file)
text = File.read(file)
new_contents = text.gsub('#import "Node.h"', '#import "SVGKit/Node.h"')
File.open(file, 'w') { |f| f.write(new_contents) }
end
end
```
* release ([afbb9cd](https://github.com/pinpong/react-native-google-maps-plus/commit/afbb9cdf0261c35fcd4c6423096fbecaa482f704))
* release ([#18](https://github.com/pinpong/react-native-google-maps-plus/issues/18)) ([b271ccc](https://github.com/pinpong/react-native-google-maps-plus/commit/b271ccc69f9cb3e48c865801bdd104fd6065b557))

After applying this, run:
### 🛠️ Other changes

```sh
cd ios && pod install --repo-update
```
* format ([e67d939](https://github.com/pinpong/react-native-google-maps-plus/commit/e67d939e23a8db82432334c767f780ebe2320d6c))

- **Maps not rendering**
- Check that your API key has **Maps SDK for Android/iOS** enabled in Google Cloud Console.
- Make sure the key is not restricted to wrong bundle IDs or SHA1 fingerprints.
## 1.0.0 (2025-10-02)

## Contributing
### 🐛 Bug Fixes

- [Development workflow](CONTRIBUTING.md#development-workflow)
- [Sending a pull request](CONTRIBUTING.md#sending-a-pull-request)
- [Code of conduct](CODE_OF_CONDUCT.md)
* set npm publish to true ([ed7544b](https://github.com/pinpong/react-native-google-maps-plus/commit/ed7544b5c0b39cec418a83842e215253ac7b6eef))

## License
### 📚 Documentation

MIT
* update README.md ([60936c9](https://github.com/pinpong/react-native-google-maps-plus/commit/60936c9351f95e590b779883d161aad1272f4a1b))
* update README.md ([00d3f65](https://github.com/pinpong/react-native-google-maps-plus/commit/00d3f656679415a8105fff2ae52fd0bd3106e472))
* update README.md ([7354d38](https://github.com/pinpong/react-native-google-maps-plus/commit/7354d3822298b75ad28024f5488cc25e70891b9c))
* update README.md ([bb2bf47](https://github.com/pinpong/react-native-google-maps-plus/commit/bb2bf47d7b273e1dd02a44425713ebe7c9bfb612))

---
### 🛠️ Other changes

Made with [create-react-native-library](https://github.com/callstack/react-native-builder-bob)
* initial commit ([d240a87](https://github.com/pinpong/react-native-google-maps-plus/commit/d240a870fa08e5a01ef8b3e981f7e78c7e113fef))
30 changes: 26 additions & 4 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -103,9 +103,10 @@ Checkout the example app in the [example](./example) folder.
- **`GMSServices must be configured before use`**
Ensure your key is in `Info.plist` and/or provided via `GMSServices.provideAPIKey(...)` in `AppDelegate.swift`.

- **Build fails with `Node.h` import error from SVGKit**
SVGKit uses a header `Node.h` which can conflict with iOS system headers.
You can patch it automatically in your **Podfile** inside the `post_install` hook:
- **Build fails with `Node.h`, `CSSValue.h`, or `SVGLength.h` import errors from SVGKit**
SVGKit includes headers (`Node.h`, `CSSValue.h`, `SVGLength.h`) that can conflict with
iOS system headers and React Native Reanimated’s internal types.
You can patch them automatically in your **Podfile** inside the `post_install`

```ruby
post_install do |installer|
Expand All @@ -121,14 +122,35 @@ Checkout the example app in the [example](./example) folder.
end
end

# Patch SVGKit includes to avoid Node.h conflicts
# --- SVGKit Patch ---
require 'fileutils'
svgkit_path = File.join(installer.sandbox.pod_dir('SVGKit'), 'Source')

# node fix
Dir.glob(File.join(svgkit_path, '**', '*.{h,m}')).each do |file|
FileUtils.chmod("u+w", file)
text = File.read(file)
new_contents = text.gsub('#import "Node.h"', '#import "SVGKit/Node.h"')
File.open(file, 'w') { |f| f.write(new_contents) }
# puts "Patched Node import in: #{file}"
end

# import CSSValue.h
Dir.glob(File.join(svgkit_path, '**', '*.{h,m}')).each do |file|
FileUtils.chmod("u+w", file)
text = File.read(file)
new_contents = text.gsub('#import "CSSValue.h"', '#import "SVGKit/CSSValue.h"')
File.open(file, 'w') { |f| f.write(new_contents) }
# puts "Patched CSSValue import in: #{file}"
end

# import SVGLength.h
Dir.glob(File.join(svgkit_path, '**', '*.{h,m}')).each do |file|
FileUtils.chmod("u+w", file)
text = File.read(file)
new_contents = text.gsub('#import "SVGLength.h"', '#import "SVGKit/SVGLength.h"')
File.open(file, 'w') { |f| f.write(new_contents) }
# puts "Patched SVGLength import in: #{file}"
end
end
```
Expand Down
6 changes: 5 additions & 1 deletion android/build.gradle
Original file line number Diff line number Diff line change
Expand Up @@ -25,7 +25,11 @@ apply plugin: "kotlin-android"
apply from: '../nitrogen/generated/android/RNGoogleMapsPlus+autolinking.gradle'
apply from: "./fix-prefab.gradle"

apply plugin: "com.facebook.react"
if (rootProject.name != "rngooglemapsplus.example") {
apply plugin: "com.facebook.react"
} else {
println("\u001B[33m⚠️ Skipping React Native Gradle plugin in library (example build detected)\u001B[0m")
}

def getExtOrIntegerDefault(name) {
return rootProject.ext.has(name) ? rootProject.ext.get(name) : (project.properties["RNGoogleMapsPlus_" + name]).toInteger()
Expand Down
1 change: 1 addition & 0 deletions example/babel.config.js
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,7 @@ const root = path.resolve(__dirname, '..');
module.exports = getConfig(
{
presets: ['module:@react-native/babel-preset'],
plugins: ['react-native-worklets/plugin'],
},
{ root, pkg }
);
Loading
Loading