React Native Mapping Integration
npm install @pod-point/react-native-maps --save
iOS Setup Guide
- Go get yourself a cup of coffee, this could take a while...
- Open up your React Native project in XCode, this is the
.xcodeprojfile in the
iosdirectory of your React Native project.
- Click on the root of your project in XCode, then select your project's main target. Select Build Settings and then
search for Framework Search Paths. Add
$(PROJECT_DIR)/../node_modules/@pod-point/react-native-maps/ios_modules/GoogleMaps-1.10.4/Frameworksto the framework search path list and make sure it is set to recursive.
- Now search for Header Search Paths. Add
$(SRCROOT)/../node_modules/@pod-point/react-native-mapsto the header search path list and make sure that it is also set to recursive.
node_modules/@pod-point/react-native-maps/iosin Finder and locate the
PPTMapView.xcodeprojpackage. Drag this file into the XCode project navigator. You can keep this in the
Librariesgroup along with all the other React Native packages.
- Expand the
PPTMapView.xcodeprojtree and select
GoogleMapsApi.plist- drag this into the group which contains your
AppDelegate.mfiles; this group is usually named after your app. When prompted ensure that Copy Items if Needed is deselected when prompted, this will prevent this file from being committed into source control. Open up the file and enter your Google API key into the value column of the row named
- Open up
#import "PPTGoogleMapProvider.h"at the top of the file. Then add
[PPTGoogleMapProvider provideAPIKey];somewhere in the
applicationmethod, ideally at the top.
- Select the
Google Maps SDKgroup in
PPTMapView.xcodeproj, drag these packages into the
Librariesgroup of your React Native project and ensure that Copy Items if Needed is deselected when prompted.
- Click on the root of your project in XCode, then select your project's main target. Click on Build Phases and
double check that all the libraries and frameworks were automatically added to the Link Binary With Libraries phase.
If they weren't, select all the packages in the Google Maps SDK group (apart from
GoogleMaps.bundle) and drag them into this build phase.
Cmd+Rand make sure the app runs!
Android Setup Guide
- Open up your React Native project in Android Studio, this is the
androiddirectory in your React Native project.
- Expand Gradle Scripts from within the project tree and open
settings.gradle. Replace the line in the script which states
include ':app', ':pptmapview'(or append
':pptmapview'to the end of the include statement if you're already including other modules).
- Add the following line to the end of
project(':pptmapview').projectDir = new File(rootProject.projectDir, '../node_modules/@pod-point/react-native-maps/android/library')
- Open up your
build.gradlefile and add the following line to the end of your dependancies section:
compile project(path: ':pptmapview')
- You should now be prompted to run a Gradle project sync so press Sync Now in the gold toolbar that should be visible.
- Open your projects
MainActivityclass and import the following package:
- Find the line in your main activity class which has the following on it -
.addPackage(new MainReactPackage()), add the following line below:
- Expand the
pptmapviewpackage in your project explorer and then expand the
manifestsdirectory. Open up the
AndroidManifset.xmland find the node with the key
com.google.android.geo.API_KEY. Enter your Google API key into the
android:valueproperty and save the file. This file will be kept out of source control so it is safe to store the API key in here.
Ctrl+Rand make sure the app runs!
Creating a new Map
Require the UI component in the component you're wanting to display a map in:
Include the following JSX in your render method:
You will need to style the component appropriately so that it is visible, just like any other React Native view component.
There are a number of options for the map view which let you customise its layout and UI options. These are specified as JSX parameters like so:
<GoogleMapcameraPosition=auto: true zoom: 10showsUserLocation=truescrollGestures=truezoomGestures=truetiltGestures=truerotateGestures=trueconsumesGesturesInView=truecompassButton=truemyLocationButton=trueindoorPicker=trueallowScrollGesturesDuringRotateOrZoom=true/>
cameraPosition- The map view camera position. You can set
autoto true and specify a zoom level or you can pass the latitude, longitude and zoom level to manually position the camera.
showsUserLocation- If true the app will ask for the user's location and focus on it. Default value is false.
scrollGestures- Controls whether scroll gestures are enabled (default) or disabled.
zoomGestures- Controls whether zoom gestures are enabled (default) or disabled.
tiltGestures- Controls whether tilt gestures are enabled (default) or disabled.
rotateGestures- Controls whether rotate gestures are enabled (default) or disabled.
consumesGesturesInView- Controls whether gestures by users are completely consumed by the GMSMapView when gestures are enabled (default YES).
compassButton- Enables or disables the compass.
myLocationButton- Enables or disables the My Location button.
indoorPicker- Enables (default) or disables the indoor floor picker.
allowScrollGesturesDuringRotateOrZoom- Controls whether rotate and zoom gestures can be performed off-center and scrolled around (default YES).
Map markers can be set by passing an array of objects which describe them. The markers can be the stock Google variety,
or you can pass a reference to an image to customise them. It's also possible to add metadata to the marker, simply add
meta parameter to the marker object. All markers require a unique identifier string, these should be formatted in a
similar way to an id tag in HTML. This metadata is returned when an event which affects the marker is fired such
didTapMarker. Markers are specified using a JSX parameter:
<GoogleMapmarkers=id: 'marker-100'latitude: 515072longitude: -01275id: 'marker-101'latitude: 532031longitude: -15621icon:id: 'marker-102'latitude: 217342longitude: -57350meta:foo: 'bar'/>
Event listeners can be attached to the map in the form of a callback. These are specified as a JSX parameter like so:
The following events listeners are available:
didChangeCameraPosition- Called repeatedly during any animations or gestures on the map (or once, if the camera is explicitly set). This may not be called for all intermediate camera positions. It is always called for the final position of an animation or gesture - iOS and Android.
idleAtCameraPosition- Called when the map becomes idle, after any outstanding gestures or animations have completed (or after the camera has been explicitly set) - iOS Only.
didTapAtCoordinate- Called after a tap gesture at a particular coordinate, but only if a marker was not tapped
- iOS and Android. This is called before deselecting any currently selected marker (the implicit action for tapping on the map).
didLongPressAtCoordinate- Called after a long-press gesture at a particular coordinate - iOS and Android.
didTapMarker- Called after a marker has been tapped - iOS and Android.
didTapOverlay- Called after an overlay has been tapped - iOS Only.
didBeginDraggingMarker- Called when dragging has been initiated on a marker - iOS and Android.
didEndDraggingMarker- Called after dragging of a marker ended - iOS and Android.
didDragMarker- Called while a marker is dragged - iOS and Android.
didTapMyLocationButtonForMapView- Called when the My Location button is tapped - iOS and Android.
An object is returned with details about the event, these typically look like:
id: 'marker-102'name: "didTapMarker"data:latitude: 217342longitude: -57350meta:foo: 'bar'
Google specifies that you should display a legal notice in your application when using their maps SDK. You can access this notice using the following constant:
const notice = NativeModulesPPTGoogleMapManagerlegalNotice// Display the legal notice somewhere in your app...
Thank you for considering contributing to this package! The contribution guide can be found here.
If you discover a security vulnerability within this package, please send an e-mail to firstname.lastname@example.org. All security vulnerabilities will be promptly addressed.