React.js Google Maps API integration

Usage no npm install needed!

<script type="module">
  import reactGoogleMapsApi from '';



React Google Maps API 1.0.8

This library requires React v16.6 or later. 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

npm i -S react-google-maps-api babel-polyfill @babel/runtime


npm i -D @babel/preset-env @babel/preset-react @babel/plugin-proposal-object-rest-spread @babel/plugin-proposal-class-properties @babel/plugin-transform-spread @babel/plugin-syntax-dynamic-import @babel/plugin-transform-runtime babel-plugin-macros babel-plugin-transform-react-remove-prop-types

If you do not have .babelrc file, create it next to package.json

Content of .babelrc should look like this:

  "presets": [
  "plugins": [
        "corejs": false,
        "helpers": true,
        "regenerator": true,
        "useESModules": false
  "env": {
    "production": {
      "plugins": [

Main features

  • Simplified API
  • Uses the new Context API
  • Supports async React (StrictMode complient)
  • Removes lodash dependency => smaller bundle size 12.4kb, tree-shakeable
  • forbids loading of Roboto fonts, if you set property preventGoogleFonts on <LoadScript preventGoogleFonts /> component


Examples can be found in two places:

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


You can save on bundle size if you import only components, which you use from react-google-maps-api/lib/..., although whole library is tree-shakable.

Using the examples requires you to generate a google maps api key. For instructions on how to do that please see the following guide


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