1 | # @react-google-maps/api
|
2 |
|
3 | ![logo](https://raw.githubusercontent.com/JustFly1984/react-google-maps-api/master/logo.png)
|
4 |
|
5 | @react-google-maps/api
|
6 |
|
7 | > 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](https://github.com/tomchentw/react-google-maps)
|
8 |
|
9 | This is complete re-write of the (sadly unmaintained) `react-google-maps` library. We thank [tomchentw](https://github.com/tomchentw/) for his great work that made possible.
|
10 |
|
11 | @react-google-maps/api provides very simple bindings to the google maps api and lets you use it in your app as React components.
|
12 |
|
13 | Here are the main additions to react-google-maps that were the motivation behind this re-write
|
14 |
|
15 | ## Install @react-google-maps/api
|
16 |
|
17 | with NPM
|
18 |
|
19 | ```#!/bin/bash
|
20 | npm i -S @react-google-maps/api
|
21 | ```
|
22 |
|
23 | or Yarn
|
24 |
|
25 | ```#!/bin/bash
|
26 | yarn add @react-google-maps/api
|
27 | ```
|
28 |
|
29 | ## Migration from react-google-maps@9.4.5
|
30 |
|
31 | if you need an access to map object, instead of `ref` prop, you need to use `onLoad` callback on `<GoogleMap />` component.
|
32 |
|
33 | Before:
|
34 |
|
35 | ```jsx
|
36 | // before
|
37 | <GoogleMap
|
38 | ref={map => {
|
39 | const bounds = new window.google.maps.LatLngBounds();
|
40 |
|
41 | map.fitBounds(bounds);
|
42 | }}
|
43 | />
|
44 | ```
|
45 |
|
46 | After:
|
47 |
|
48 | ```jsx
|
49 | <GoogleMap
|
50 | onLoad={map => {
|
51 | const bounds = new window.google.maps.LatLngBounds();
|
52 | map.fitBounds(bounds);
|
53 | }}
|
54 | onUnmount={map => {
|
55 | // do your stuff before map is unmounted
|
56 | }}
|
57 | />
|
58 | ```
|
59 |
|
60 | ## Main features
|
61 |
|
62 | - Simplified API
|
63 | - Uses the new Context API
|
64 | - Supports async React (StrictMode complient)
|
65 | - Removes lodash dependency =>
|
66 | smaller bundle size `12.4kb` gzip, tree-shakeable [https://bundlephobia.com/result?p=@react-google-maps/api](https://bundlephobia.com/result?p=@react-google-maps/api)
|
67 | - forbids loading of Roboto fonts, if you set property preventGoogleFonts on `<LoadScript preventGoogleFonts />` component
|
68 |
|
69 | ## Examples
|
70 |
|
71 | Examples can be found in two places:
|
72 |
|
73 | 1. [Official docs](https://react-google-maps-api-docs.netlify.com/) (powered by [react-styleguidist](https://github.com/styleguidist/react-styleguidist).
|
74 | 2. A Gatsby app including some examples. See the [examples](https://github.com/JustFly1984/react-google-maps-api/tree/master/packages/react-google-maps-api-gatsby-example/src/examples) folder
|
75 | 3. [Gatsby.js Demo](https://react-google-maps-api-gatsby-demo.netlify.com/)
|
76 |
|
77 | ## Advice
|
78 |
|
79 | > Using the examples requires you to generate a google maps api key. For instructions on how to do that please see the following [guide](https://developers.google.com/maps/documentation/embed/get-api-key)
|
80 |
|
81 | ## Community Help Resource
|
82 |
|
83 | You can join the community at https://spectrum.chat/react-google-maps to ask questions and help others with your experience.
|
84 |
|
85 | ## Contribute
|
86 |
|
87 | Maintainers and contributors are very welcome! See [this issue](https://github.com/JustFly1984/react-google-maps-api/issues/18) to get started.
|
88 |
|
89 | ## How to test changes locally
|
90 |
|
91 | 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!
|
92 |
|
93 | 1. In the file `packages/react-google-maps-api/package.json` change `main` to `"src/index.ts"`
|
94 | 2. In the same file, delete the `module` field
|
95 | 3. You can now use the package `react-google-maps-api-gatsby-example` to test your changes. Just make sure you change the import from `@react-google-maps/api` to `../../../react-google-maps-api`
|
96 |
|
97 | 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.
|
98 |
|
99 | Since version 1.2.2 We added useGoogleMap hook, which is working only with React@16.8.1 and later versions.
|
100 |
|
101 | ## Websites made with @react-google-maps-api
|
102 |
|
103 | [DriveFromTo.com](https://www.drivefromto.com/en) Transfer Booking service PWA.
|
104 |
|
105 | add your website by making PR!
|