# React Native Google Maps Plus

> Google Maps and Street View components for React Native, built on Nitro Modules.

## Guides

- [Installation](https://pinpong.github.io/react-native-google-maps-plus/docs/guides/installation): Install the package and set up the Google Maps SDKs and API keys for iOS, Android and Expo.
- [Usage](https://pinpong.github.io/react-native-google-maps-plus/docs/guides/usage): How the map and Street View components work: overlays as props, initial options, callbacks and native methods.
- [Upgrading from 1.x](https://pinpong.github.io/react-native-google-maps-plus/docs/guides/upgrading-from-1x): Breaking changes from 1.x and the steps to upgrade an app to 2.x.
- [Location](https://pinpong.github.io/react-native-google-maps-plus/docs/guides/location): When location updates run, how they relate to the blue dot, and the permission APIs.
- [SVG markers](https://pinpong.github.io/react-native-google-maps-plus/docs/guides/svg-markers): Any SVG string as marker or info window icon, rendered natively with lunasvg. Size, images and fonts.
- [Advanced markers](https://pinpong.github.io/react-native-google-maps-plus/docs/guides/advanced-markers): Google Advanced Markers with pins, glyphs and collision behavior, and how they fall back.
- [Troubleshooting](https://pinpong.github.io/react-native-google-maps-plus/docs/guides/troubleshooting): Fixes for common build and runtime errors on iOS and Android.
- [Limitations](https://pinpong.github.io/react-native-google-maps-plus/docs/guides/limitations): Known limitations and platform differences of SVG markers, heatmaps, Advanced Markers, lite mode and location.
- [API Keys](https://pinpong.github.io/react-native-google-maps-plus/docs/guides/api-keys): Where to create and configure the Google Maps API keys.
- [Native Dependencies](https://pinpong.github.io/react-native-google-maps-plus/docs/guides/native-dependencies): The native SDKs and libraries the package uses, and the licenses to ship with an app.

## Examples

- [Ride tracking](https://pinpong.github.io/react-native-google-maps-plus/docs/examples/use-cases/ride): A car on its way to the drop-off. The car is a flat SVG marker rotated along the route, the driven part of the route is grey, and the drop-off shows the ETA.
- [Navigation](https://pinpong.github.io/react-native-google-maps-plus/docs/examples/use-cases/navigation): Turn-by-turn navigation on a tilted camera with 3D buildings, shortly before the next turn. The camera bearing follows the route, the position puck is a flat marker and the turn is an SVG marker above the intersection. iOS draws 3D buildings only above zoom 17.
- [Scooter sharing](https://pinpong.github.io/react-native-google-maps-plus/docs/examples/use-cases/scooters): Scooters around the user, each with a battery ring that is drawn as an SVG arc. The circle shows the walking distance.
- [Store locator](https://pinpong.github.io/react-native-google-maps-plus/docs/examples/use-cases/stores): Coffee shops around the user. Tapping a pin selects the store: its pin turns green and a card with name, rating and opening hours appears above it. Both the pins and the card are SVG markers.
- [Rentals](https://pinpong.github.io/react-native-google-maps-plus/docs/examples/use-cases/rentals): Price tags with a house icon inside a drawn search area. Listings outside the area are faded with the marker opacity, the selected one is green.
- [Transit network](https://pinpong.github.io/react-native-google-maps-plus/docs/examples/use-cases/transit): BART and Muni Metro lines through San Francisco as polylines with a white casing, stations as small SVG markers and station names as labels next to them. Where BART and Muni share Market Street, Muni is drawn beside BART.
- [Delivery zones](https://pinpong.github.io/react-native-google-maps-plus/docs/examples/use-cases/zones): Delivery times around a restaurant as nested polygons, smallest on top. The labels sit on the edge of each zone.
- [EV charging](https://pinpong.github.io/react-native-google-maps-plus/docs/examples/use-cases/charging): Charging stations with free and total chargers. The color follows the availability, a full station is grey.
- [City tour](https://pinpong.github.io/react-native-google-maps-plus/docs/examples/use-cases/tour): A walking tour with numbered stops, connected by a polyline. The names sit next to their stop, on the side away from the route.
- [Friends nearby](https://pinpong.github.io/react-native-google-maps-plus/docs/examples/use-cases/friends): Friends as avatar markers with a gradient ring, an online dot and their name with the time they were last seen.
- [Analytics](https://pinpong.github.io/react-native-google-maps-plus/docs/examples/use-cases/heatmap): A heatmap of activity on a dark map style. iOS and Android compute the color scale differently, so radius, weights and the gradient start points are set per platform, see Limitations.
- [Outdoor tracking](https://pinpong.github.io/react-native-google-maps-plus/docs/examples/use-cases/hiking): A recorded hike on the terrain map: the GPS track as a polyline, kilometer markers computed along it, the start and the summit.
- [Drone survey](https://pinpong.github.io/react-native-google-maps-plus/docs/examples/use-cases/drone): A survey area over farmland on the satellite map. The flight path runs in lanes across the area, the flown part is yellow and the drone is a flat marker heading along its lane.
- [Flight routes](https://pinpong.github.io/react-native-google-maps-plus/docs/examples/use-cases/flights): Routes across the Atlantic as geodesic polylines, which follow the great circle and curve on the map. The plane is a flat marker rotated to its heading on the route to London.
- [Street View](https://pinpong.github.io/react-native-google-maps-plus/docs/examples/use-cases/street-view): A Street View panorama at Fort Point, looking at the Golden Gate Bridge.
- [Advanced markers](https://pinpong.github.io/react-native-google-maps-plus/docs/examples/features/advanced-markers): Google's Advanced Markers with colored pins and glyphs: text, a color or an SVG. They need a map ID, `DEMO_MAP_ID` works for testing.
- [Clustering](https://pinpong.github.io/react-native-google-maps-plus/docs/examples/features/clustering): 500 points grouped on a screen grid of 70 dp. The clusters are recomputed when the camera stops moving and drawn as SVG bubbles sized by their count. For larger data sets a library like react-native-clusterer does the same.
- [KML layers](https://pinpong.github.io/react-native-google-maps-plus/docs/examples/features/kml): Sales territories from a KML document: polygons with their own line and fill styles, and placemarks for the offices. The KML is passed as a string.
- [Data tiles](https://pinpong.github.io/react-native-google-maps-plus/docs/examples/features/tiles): Land surface temperature from NASA GIBS as a URL tile overlay on top of the map. The URL template takes `{x}`, `{y}` and `{z}`.
- [My location](https://pinpong.github.io/react-native-google-maps-plus/docs/examples/features/location): The blue dot and the location button of the Maps SDK. The example requests the location permission with `GoogleMapsModule` and enables the blue dot once it is granted. Android does not ask on its own, see Location.
- [Indoor maps](https://pinpong.github.io/react-native-google-maps-plus/docs/examples/features/indoor): The indoor floor plan of San Francisco International Airport with the level picker of the Maps SDK.
- [Fit to markers](https://pinpong.github.io/react-native-google-maps-plus/docs/examples/features/camera): Once the map has loaded, the camera fits all markers with some padding. `hybridRef` gives access to the native methods, `onMapLoaded` tells when the map is ready for them.
- [Snapshot](https://pinpong.github.io/react-native-google-maps-plus/docs/examples/features/snapshot): Once the map has loaded, `snapshot` captures it as an image, shown here as a thumbnail. The result is a data URI or a file, ready to share or upload.
- [Maps in a list](https://pinpong.github.io/react-native-google-maps-plus/docs/examples/features/lite-mode): Small maps in a scrolling list, e.g. for search results. On Android, `liteMode` renders them as static images, which keeps many maps cheap. iOS has no lite mode and renders regular maps.
- [Traffic at night](https://pinpong.github.io/react-native-google-maps-plus/docs/examples/features/traffic): The live traffic layer on the native dark map style. `userInterfaceStyle` switches the map between light and dark, or follows the system.

## API

- [API reference](https://pinpong.github.io/react-native-google-maps-plus/docs/api): props, methods and types

## Optional

- [Full documentation](https://pinpong.github.io/react-native-google-maps-plus/llms-full.txt): all guides, examples with their code and the API reference in one file