|
3 | 3 | [](https://www.npmjs.com/package/react-native-google-maps-plus) |
4 | 4 | [](https://www.npmjs.com/package/react-native-google-maps-plus) |
5 | 5 | [](https://github.com/pinpong/react-native-google-maps-plus/actions/workflows/release.yml) |
| 6 | +[](https://pinpong.github.io/react-native-google-maps-plus) |
6 | 7 |  |
7 | 8 |
|
8 | 9 | React Native wrapper for Android & iOS Google Maps SDK. |
9 | 10 |
|
10 | | -## Installation |
| 11 | +## Documentation |
11 | 12 |
|
12 | | -`react-native-nitro-modules` is required as this library relies on [Nitro Modules](https://nitro.margelo.com/). |
| 13 | +Full installation guide and API reference: |
| 14 | +https://pinpong.github.io/react-native-google-maps-plus |
13 | 15 |
|
14 | | -```sh |
15 | | -yarn add react-native-google-maps-plus react-native-nitro-modules |
16 | | -``` |
17 | | - |
18 | | -**iOS** |
19 | | - |
20 | | -Add this to your Podfile only for bare React Native apps. |
21 | | -(Not required for Expo, handled by the config plugin.) |
22 | | - |
23 | | -```ruby |
24 | | -post_install do |installer| |
25 | | - react_native_post_install( |
26 | | - installer, |
27 | | - config[:reactNativePath], |
28 | | - :mac_catalyst_enabled => false, |
29 | | - # :ccache_enabled => true |
30 | | - ) |
31 | | - |
32 | | - require_relative '../node_modules/react-native-google-maps-plus/scripts/svgkit_patch' |
33 | | - apply_svgkit_patch(installer) |
34 | | -end |
35 | | -``` |
36 | | - |
37 | | -### Expo Projects |
38 | | - |
39 | | -Add your keys to the `app.json`. |
40 | | -The config plugin automatically injects them into your native Android and iOS builds during `expo prebuild`. |
41 | | - |
42 | | -```json |
43 | | -{ |
44 | | - "expo": { |
45 | | - "plugins": [ |
46 | | - [ |
47 | | - "react-native-google-maps-plus", |
48 | | - { |
49 | | - "googleMapsAndroidApiKey": "YOUR_ANDROID_MAPS_API_KEY", |
50 | | - "googleMapsIosApiKey": "YOUR_IOS_MAPS_API_KEY" |
51 | | - } |
52 | | - ] |
53 | | - ] |
54 | | - } |
55 | | -} |
56 | | -``` |
57 | | - |
58 | | -## Setup API Key |
59 | | - |
60 | | -You will need a valid **Google Maps API Key** from the [Google Cloud Console](https://console.cloud.google.com/). |
61 | | - |
62 | | -### Android |
63 | | - |
64 | | -**Note:** These instructions apply to **bare React Native apps only**. |
65 | | -Expo projects should use the config plugin instead (see Expo section above). |
66 | | - |
67 | | -See the official [Google Maps Android SDK configuration guide](https://developers.google.com/maps/documentation/android-sdk/config#step_3_add_your_api_key_to_the_project) for more details. |
68 | | - |
69 | | -### iOS |
70 | | - |
71 | | -**Note:** These instructions apply to **bare React Native apps only**. |
72 | | -Expo projects should use the config plugin instead (see Expo section above). |
73 | | - |
74 | | -See the official [Google Maps iOS SDK configuration guide](https://developers.google.com/maps/documentation/ios-sdk/config#get-key) for more details. |
75 | | - |
76 | | -## Dependencies & Native Documentation |
77 | | - |
78 | | -This package is React Native wrapper around the official Google Maps SDKs. |
79 | | -For full API behavior, configuration options, and feature reference, please consult the native documentation: |
80 | | - |
81 | | -- **iOS Google Maps SDK** |
82 | | - https://developers.google.com/maps/documentation/ios-sdk |
83 | | - |
84 | | -- **Android Google Maps SDK** |
85 | | - https://developers.google.com/maps/documentation/android-sdk |
86 | | - |
87 | | -- **Maps Utility Libraries (iOS & Android)** |
88 | | - https://developers.google.com/maps/documentation/ios-sdk/utility |
89 | | - https://developers.google.com/maps/documentation/android-sdk/utility |
90 | | - |
91 | | -- **SVG Rendering** (used for custom marker icons) |
92 | | - - iOS: https://github.com/SVGKit/SVGKit |
93 | | - - Android: https://bigbadaboom.github.io/androidsvg/ |
94 | | - |
95 | | -These libraries are automatically linked during installation. |
96 | | -If you encounter build issues, try cleaning and rebuilding your native project. |
97 | | - |
98 | | -> **Note:** This package follows the native SDKs closely. Props and behavior match the underlying Google Maps APIs whenever possible. |
| 16 | +## Contributing |
99 | 17 |
|
100 | | -## Usage |
| 18 | +- [Development workflow](CONTRIBUTING.md#development-workflow) |
| 19 | +- [Sending a pull request](CONTRIBUTING.md#sending-a-pull-request) |
| 20 | +- [Code of conduct](CODE_OF_CONDUCT.md) |
101 | 21 |
|
102 | | -Basic map: |
| 22 | +## License |
103 | 23 |
|
104 | | -```tsx |
105 | | -import React from 'react'; |
106 | | -import { GoogleMapsView } from 'react-native-google-maps-plus'; |
| 24 | +MIT |
107 | 25 |
|
108 | | -export default function App() { |
109 | | - return ( |
110 | | - <GoogleMapsView |
111 | | - style={{ flex: 1 }} |
112 | | - initialProps={{ |
113 | | - camera: { |
114 | | - center: { latitude: 37.7749, longitude: -122.4194 }, |
115 | | - zoom: 12, |
116 | | - }, |
117 | | - }} |
118 | | - markers={[ |
119 | | - { |
120 | | - id: '1', |
121 | | - zIndex: 1, |
122 | | - coordinate: { latitude: 37.7749, longitude: -122.4194 }, |
123 | | - }, |
124 | | - ]} |
125 | | - /> |
126 | | - ); |
127 | | -} |
128 | | -``` |
| 26 | +--- |
129 | 27 |
|
130 | | -Check out the example app in the [example](./example) folder. |
| 28 | +Made with [create-react-native-library](https://github.com/callstack/react-native-builder-bob) |
131 | 29 |
|
132 | 30 | ## Contributing |
133 | 31 |
|
|
0 commit comments