This library requires React v16.6 or later. To use the latest features (including hooks) requires React v16.8+. If you need support for earlier versions of React, you should check out react-google-maps
This is complete re-write of the (sadly unmaintained)
react-google-maps library. We thank tomchentw for his great work that made possible.
@react-google-maps/api provides very simple bindings to the google maps api and lets you use it in your app as React components.
Here are the main additions to react-google-maps that were the motivation behind this re-write
npm i -S @react-google-maps/api
yarn add @react-google-maps/api
Migration from firstname.lastname@example.org
if you need an access to map object, instead of
ref prop, you need to use
onLoad callback on
<GoogleMap /> component.
- Simplified API
- Uses the new Context API
- Supports async React (StrictMode complient)
- Removes lodash dependency =>
smaller bundle size
12.4kbgzip, tree-shakeable https://bundlephobia.com/result?p=@react-google-maps/api
- forbids loading of Roboto fonts, if you set property preventGoogleFonts on
<LoadScript preventGoogleFonts />component
Examples can be found in two places:
- Official docs (powered by react-styleguidist.
- A Gatsby app including some examples. See the examples folder
- Gatsby.js Demo
Using the examples requires you to generate a google maps api key. For instructions on how to do that please see the following guide
Community Help Resource
You can join the community at https://spectrum.chat/react-google-maps to ask questions and help others with your experience.
Maintainers and contributors are very welcome! See this issue to get started.
How to test changes locally
When working on a feature/fix, you're probably gonna want to test your changes. This workflow is a work in progress. Please feel free to improve it!
- In the file
- In the same file, delete the
- You can now use the package
react-google-maps-api-gatsby-exampleto test your changes. Just make sure you change the import from
Since 1.2.0 you can use onLoad and onMount props for each @react-google-maps/api component, ref does not contain API methods anymore.
Since version 1.2.2 We added useGoogleMap hook, which is working only with React@16.8.1 and later versions.
Websites made with @react-google-maps-api
DriveFromTo.com Transfer Booking service PWA.
add your website by making PR!