README
react-google-maps-api
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
and
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": [
"@babel/preset-env",
"@babel/preset-react"
],
"plugins": [
"@babel/plugin-transform-spread",
"@babel/plugin-proposal-object-rest-spread",
"@babel/plugin-proposal-class-properties",
"@babel/plugin-syntax-dynamic-import",
[
"@babel/plugin-transform-runtime",
{
"corejs": false,
"helpers": true,
"regenerator": true,
"useESModules": false
}
],
"babel-plugin-macros"
],
"env": {
"production": {
"plugins": [
"babel-plugin-transform-react-remove-prop-types"
]
}
}
}
Main features
- Simplified API
- Uses the new Context API
- Supports async React (StrictMode complient)
- Removes lodash dependency =>
smaller bundle size
12.4kb
, tree-shakeable https://bundlephobia.com/result?p=react-google-maps-api@1.0.0 - forbids loading of Roboto fonts, if you set property preventGoogleFonts on
<LoadScript preventGoogleFonts />
component
Examples
Examples can be found in two places:
- Official docs (powered by docz). See the docs folder
- A Gatsby app including some examples. See the examples folder
- Gatsby.js Demo
Advise
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
Contribute
Maintainers and contributors are very welcome! See this issue to get started.