@react-google-maps/api

@react-google-maps/api

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

Install @react-google-maps/api

with NPM

npm i -S @react-google-maps/api

or Yarn

yarn add @react-google-maps/api

Main features

• Simplified API
• Uses the new Context API
• Supports async React (StrictMode complient)
• Removes lodash dependency => smaller bundle size 12.4kb gzip, tree-shakeable https://bundlephobia.com/result?p=@react-google-maps/[email protected]
• forbids loading of Roboto fonts, if you set property preventGoogleFonts on <LoadScript preventGoogleFonts /> component

Examples

Examples can be found in two places:

1. Official docs (powered by react-styleguidist.
2. A Gatsby app including some examples. See the examples folder
3. Gatsby.js Demo

Advice

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.

Contribute

Maintainers and contributors are very welcome! See this issue to get started.

Migration from [email protected]

if you need an access to map object, instead of ref prop, you need to use onLoad callback on <GoogleMap /> component.

Before:

// before
<GoogleMap
  ref={map => {
    const bounds = new window.google.maps.LatLngBounds();

    map.fitBounds(bounds);
  }}
/>

After:

<GoogleMap
  onLoad={map => {
    const bounds = new window.google.maps.LatLngBounds();
    map.fitBounds(bounds);
  }}
  onUnmount={map => {
    // do your stuff before map is unmounted
  }}
/>

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 [email protected] and later versions.

Websites made with @react-google-maps-api

DriveFromTo.com Transfer Booking service PWA.

add your website by making PR!