You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
| `colors` | `Array<String>` | | Colors (one or more) to use for gradient.
20
+
| `startPoints` | `Array<Number>` | | Array of floating point values from 0 to 1 representing where each color starts. Array length must be equal to `colors` array length.
21
+
| `colorMapSize` | `Number` | `256` | Resolution of color map -- number corresponding to the number of steps colors are interpolated into.
Copy file name to clipboardExpand all lines: docs/installation.md
+82-47Lines changed: 82 additions & 47 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -3,39 +3,46 @@
3
3
Install the library from npm:
4
4
5
5
```sh
6
-
npm install react-native-maps --save
6
+
npm install react-native-maps --save-exact
7
+
yarn add react-native-maps -E
7
8
```
8
9
9
10
The library ships with platform native code that needs to be compiled
10
11
together with React Native. This requires you to configure your build
11
12
tools.
12
13
14
+
Since React Native 0.60 and higher, [autolinking](https://github.com/react-native-community/cli/blob/master/docs/autolinking.md) makes the installation process simpler.
15
+
13
16
The actual map implementation depends on the platform. On Android, one
14
17
has to use [Google
15
18
Maps](https://developers.google.com/maps/documentation/), which in turn
16
-
requires you to obtain an API key for the [Android
19
+
requires you to obtain an [API key for the Android
and include the Google Maps library in your build. The native Apple Maps
25
28
based implementation works out-of-the-box and is therefore simpler to
26
29
use at the price of missing some of the features supported by the Google
27
30
Maps backend.
28
31
32
+
> **WARNING**: Before you can start using the Google Maps Platform APIs and SDKs, you must sign up and create a [billing account](https://developers.google.com/maps/gmp-get-started#create-billing-account)!
33
+
34
+
---
35
+
29
36
## Build configuration on iOS
30
37
31
-
### Using React Native Link
38
+
### Using React Native Link (React Native 0.59 and lower)
32
39
33
40
Run `react-native link react-native-maps` after which you should be able
34
41
to use this library on iOS. Note that by default this will use Apple
35
42
Maps and you will miss some of the features provided by Google (see the
36
43
instruction on manually enabling Google Maps below).
37
44
38
-
### Using CocoaPods
45
+
### Using CocoaPods (React Native 0.59 and lower)
39
46
40
47
> If the CocoaPods package manager is new to you, please first review
41
48
> its [installation guide](https://guides.cocoapods.org/using/getting-started.html)
@@ -108,7 +115,14 @@ pod install
108
115
109
116
and open the produced workspace file (`.xcworkspace`) in XCode to build your project.
110
117
111
-
### Enabling Google Maps on iOS
118
+
### Using CocoaPods (React Native 0.60 and higher)
119
+
120
+
```sh
121
+
cd ios
122
+
pod install
123
+
```
124
+
125
+
### Enabling Google Maps on iOS (React Native all versions)
112
126
113
127
If you want to enable Google Maps on iOS, obtain the Google API key and
114
128
edit your `AppDelegate.m` as follows:
@@ -127,57 +141,58 @@ edit your `AppDelegate.m` as follows:
127
141
128
142
The `[GMSServices provideAPIKey]` should be the **first call** of the method.
129
143
130
-
Then, do either of the following
144
+
Then, do either of the following:
131
145
132
-
1. If you are using CocoaPods to manage your dependecies, uncomment the
146
+
a) (React Native 0.59 and lower) If you are using CocoaPods to manage your dependecies, uncomment the
133
147
lines related to Google Maps from the `Podfile` and run `pod install`.
134
148
135
-
2. If you used React Native link, you may include Google Maps manually as a
149
+
b) (React Native 0.59 and lower) If you used React Native link, you may include Google Maps manually as a
136
150
XCode framework following the instructions from [SDK docs -> Install
137
151
manually](https://developers.google.com/maps/documentation/ios-sdk/start). Then, to link this library to the framework, add the following to your
138
152
`package.json` and replace the
139
153
`REPLACE_ME_RELATIVE_PATH_TO_GOOGLE_MAPS_INSTALL` with the relative path
140
154
from your project root to the directory in which you installed the
141
155
Google Maps frameworks. You might need to specify a recursive search path
142
-
by adding a `/**` at the end of the provided path (e.g. `"./node_modules/react-native-maps/enable-google-maps 'ios/my-frameworks/GoogleMaps/**'"
Copy file name to clipboardExpand all lines: docs/mapview.md
+5-3Lines changed: 5 additions & 3 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -9,8 +9,8 @@
9
9
| `initialRegion` | `Region` | | The initial region to be displayed by the map. Use this prop instead of `region` only if you don't want to control the viewport of the map besides the initial region.<br/><br/> Changing this prop after the component has mounted will not result in a region change.<br/><br/> This is similar to the `initialValue` prop of a text input.
10
10
| `camera` | `Camera` | | The camera view the map should display. If you use this, the `region` property is ignored.
11
11
| `initialCamera` | `Camera` | | Like `initialRegion`, use this prop instead of `camera` only if you don't want to control the viewport of the map besides the initial camera setting.<br/><br/> Changing this prop after the component has mounted will not result in a region change.<br/><br/> This is similar to the `initialValue` prop of a text input.
12
-
| `mapPadding` | `EdgePadding` | | Adds custom padding to each side of the map. Useful when map elements/markers are obscured.**Note** Google Maps only.
13
-
| `paddingAdjustmentBehavior` | 'always'\|'automatic'\|'never' | 'never' | Indicates how/when to affect padding with safe area insets (`GoogleMaps` in iOS only)
12
+
| `mapPadding` | `EdgePadding` | | Adds custom padding to each side of the map. Useful when map elements/markers are obscured.
13
+
| `paddingAdjustmentBehavior` | 'always'\|'automatic'\|'never' | 'never' | Indicates how/when to affect padding with safe area insets (`GoogleMaps` in iOS only)
| `mapType` | `String` | `"standard"` | The map type to be displayed. <br/><br/> - standard: standard road map (default)<br/> - none: no map **Note** Not available on MapKit<br/> - satellite: satellite view<br/> - hybrid: satellite view with roads and points of interest overlayed<br/> - terrain: (Android only) topographic view<br/> - mutedStandard: more subtle, makes markers/lines pop more (iOS 11.0+ only)
16
16
| `customMapStyle` | `Array` | | Adds custom styling to the map component. See [README](https://github.com/react-native-community/react-native-maps#customizing-the-map-style) for more information.
@@ -42,6 +42,7 @@
42
42
| `legalLabelInsets` | `EdgeInsets` | | If set, changes the position of the "Legal" label link from the OS default. **Note:** iOS only.
43
43
| `kmlSrc` | `string` | | The URL from KML file. **Note:** Google Maps and Markers only (either Android or iOS with `PROVIDER_GOOGLE`).
44
44
| `compassOffset` | `Point` | | If set, changes the position of the compass. **Note:** iOS Maps only.
45
+
| `isAccessibilityElement` | `Boolean` | `false` | Determines whether the MapView captures VoiceOver touches or forwards them to children. When `true`, map markers are not visible to VoiceOver. **Note:** iOS Maps only.
45
46
46
47
47
48
## Events
@@ -54,8 +55,9 @@ To access event data, you will need to use `e.nativeEvent`. For example, `onPres
54
55
| `onKmlReady` | `KmlContainer` | Callback that is called once the kml is fully loaded.
55
56
| `onRegionChange` | `Region` | Callback that is called continuously when the region changes, such as when a user is dragging the map.
56
57
| `onRegionChangeComplete` | `Region` | Callback that is called once when the region changes, such as when the user is done moving the map.
57
-
| `onUserLocationChange` | `{ coordinate: Location }` | Callback that is called when the underlying map figures our users current location (coordinate also includes isFromMockProvider value for Android API 18 and above). Make sure **showsUserLocation** is set to *true* and that the provider is `"google"`.
58
+
| `onUserLocationChange` | `{ coordinate: Location }` | Callback that is called when the underlying map figures our users current location (coordinate also includes isFromMockProvider value for Android API 18 and above). Make sure **showsUserLocation** is set to *true*.
58
59
| `onPress` | `{ coordinate: LatLng, position: Point }` | Callback that is called when user taps on the map.
60
+
| `onDoublePress` | `{ coordinate: LatLng, position: Point }` | Callback that is called when user double taps on the map.
59
61
| `onPanDrag` | `{ coordinate: LatLng, position: Point }` | Callback that is called when user presses and drags the map. **NOTE**: for iOS `scrollEnabled` should be set to false to trigger the event
60
62
| `onPoiClick` | `{ coordinate: LatLng, position: Point, placeId: string, name: string }` | Callback that is called when user click on a POI.
61
63
| `onLongPress` | `{ coordinate: LatLng, position: Point }` | Callback that is called when user makes a "long press" somewhere on the map.
Copy file name to clipboardExpand all lines: docs/overlay.md
+7Lines changed: 7 additions & 0 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -6,6 +6,13 @@
6
6
|---|---|---|---|
7
7
| `image` | `ImageSource` | A custom image to be used as the overlay. Only required local image resources and uri (as for images located in the net) are allowed to be used.
8
8
| `bounds` | `Array<LatLng>` | | The coordinates for the image (left-top corner, right-bottom corner). ie.```[[lat, long], [lat, long]]```
9
+
| `tappable` | `Bool` | `false` | `Android only` Boolean to allow an overlay to be tappable and use the onPress function.
10
+
11
+
## Events
12
+
13
+
| Event Name | Returns | Notes
14
+
|---|---|---|
15
+
| `onPress` | | `Android only` Callback that is called when the user presses on the overlay
0 commit comments