google-maps-react-ya/src/index.dev.js at master · bertuz/google-maps-react-ya · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
// @flow
import * as React from 'react';
// eslint-disable-next-line import/no-extraneous-dependencies
import ReactDOM from 'react-dom';
import useGoogleAPI from './index';
import { GOOGLE_API_KEY } from './data.dev';

const MyComponent = (): React.Node => {
  const googleApi = useGoogleAPI(GOOGLE_API_KEY);
  const mapRef = React.useRef(null);
  const [mapInstance, setMapInstance] = React.useState(null);

  React.useEffect(() => {
    if (googleApi.google === undefined) return;

    setMapInstance(
      new googleApi.google.maps.Map(mapRef.current, {
        center: { lat: -34.397, lng: 150.644 },
        zoom: 8,
      }),
    );
  }, [googleApi.google]);

  React.useEffect(() => {
    if (!mapInstance) {
      return;
    }

    mapInstance.setCenter({ lat: 45.91782, lng: 10.88685 });
  }, [mapInstance]);

  if (googleApi.error)
    return <div>An error occurred while loading the map.</div>;

  if (googleApi.google === undefined) return <div>loading...</div>;

  return (
    <div>
      loaded.
      <div
        style={{ height: 400, width: 400 }}
        id="map"
        ref={mapRef}
        data-testid="map"
      />
    </div>
  );
};

const MySecondComponent = (): React.Node => {
  const googleApi = useGoogleAPI(GOOGLE_API_KEY);
  const mapRef = React.useRef(null);
  const [mapInstance, setMapInstance] = React.useState(null);

  React.useEffect(() => {
    if (googleApi.google === undefined) return;

    setMapInstance(
      new googleApi.google.maps.Map(mapRef.current, {
        center: { lat: -34.397, lng: 150.644 },
        zoom: 8,
      }),
    );
  }, [googleApi.google]);

  React.useEffect(() => {
    if (!mapInstance) {
      return;
    }

    mapInstance.setCenter({ lat: 45.91782, lng: 10.88685 });
  }, [mapInstance]);

  if (googleApi.error)
    return <div>An error occurred while loading the map.</div>;

  if (googleApi.google === undefined) return <div>loading...</div>;

  return (
    <div>
      loaded.
      <div
        style={{ height: 400, width: 400 }}
        id="map2"
        ref={mapRef}
        data-testid="map"
      />
    </div>
  );
};

const rootElement = document.getElementById('root');
if (rootElement) {
  ReactDOM.render(
    <>
      <MyComponent />
      <MySecondComponent />
    </>,
    rootElement,
  );
}

export default MyComponent;