Init markersDispatcher_ on componentDidMount, fixes #1110 #1116 #1145 #1113 (#1146)

2025-12-08 18:26:32 +00:00 · 2023-05-14 18:20:14 +02:00 · 2023-05-14 18:20:14 +02:00 · 8e2ae4dcce
commit 8e2ae4dcce
parent 32c5ae9e2e
8 changed files with 63 additions and 56 deletions
--- a/example/src/App.js
+++ b/example/src/App.js
@ -1,7 +1,7 @@
 import React, { useState, useEffect } from 'react';
 import styled from 'styled-components';

-import GoogleMapReact from 'google-map-react'
+import GoogleMapReact from 'google-map-react';
 // import 'google-map-react/dist/index.css'

 import LOS_ANGELES_CENTER from './const/la_center';
@ -14,17 +14,17 @@ const Wrapper = styled.main`
 `;

 const App = () => {
-  const [places, setPlaces] = useState([])
+  const [places, setPlaces] = useState([]);

  const fetchPlaces = async () => {
    fetch('places.json')
-    .then((response) => response.json())
-    .then((data) => setPlaces(data.results))
-  }
+      .then((response) => response.json())
+      .then((data) => setPlaces(data.results));
+  };

  useEffect(() => {
    fetchPlaces();
-  }, [])
+  }, []);

  if (!places || places.length === 0) {
    return null;
@ -32,10 +32,7 @@ const App = () => {

  return (
    <Wrapper>
-      <GoogleMapReact
-        defaultZoom={10}
-        defaultCenter={LOS_ANGELES_CENTER}
-      >
+      <GoogleMapReact defaultZoom={10} defaultCenter={LOS_ANGELES_CENTER}>
        {places.map((place) => (
          <Marker
            key={place.id}
@ -46,7 +43,7 @@ const App = () => {
        ))}
      </GoogleMapReact>
    </Wrapper>
-  )
-}
+  );
+};

-export default App
+export default App;
--- a/example/src/App.test.js
+++ b/example/src/App.test.js
@ -1,12 +1,15 @@
-import React from 'react'
-import ReactDOM from 'react-dom'
-import App from './App'
+import React from 'react';
+import ReactDOM from 'react-dom';
+import App from './App';
 import { createRoot } from 'react-dom/client';

-
 it('renders without crashing', () => {
-  const div = document.createElement('div')
+  const div = document.createElement('div');
  const root = createRoot(div);
-  root.render(<App />)
-  ReactDOM.unmountComponentAtNode(div)
-})
+  root.render(
+    <React.StrictMode>
+      <App />
+    </React.StrictMode>
+  );
+  ReactDOM.unmountComponentAtNode(div);
+});
--- a/example/src/const/la_center.js
+++ b/example/src/const/la_center.js
@ -1 +1 @@
-export default [34.0522, -118.2437];
+export default { lat: 34.0522, lng: -118.2437 };
--- a/example/src/index.js
+++ b/example/src/index.js
@ -1,7 +1,12 @@
-import './index.css'
+import './index.css';

-import React from 'react'
-import App from './App'
+import React from 'react';
+import App from './App';
+import { createRoot } from 'react-dom/client';

-const root = createRoot(document.getElementById('root'))
-root.render(<App />)
+const root = createRoot(document.getElementById('root'));
+root.render(
+  <React.StrictMode>
+    <App />
+  </React.StrictMode>
+);
--- a/example/yarn.lock
+++ b/example/yarn.lock
@ -1147,10 +1147,12 @@
  resolved "https://registry.yarnpkg.com/@emotion/unitless/-/unitless-0.7.5.tgz#77211291c1900a700b8a78cfafda3160d76949ed"
  integrity sha512-OWORNpfjMsSSUBVrRBVGECkhWcULOAJz9ZW8uK9qgxD+87M7jHRcvh/A96XXNhXTLmKcoYSQtBEX7lHMO7YRwg==

-"@googlemaps/js-api-loader@^1.2.0":
-  version "1.2.0"
-  resolved "https://registry.yarnpkg.com/@googlemaps/js-api-loader/-/js-api-loader-1.2.0.tgz#d5229607638932ae7d0c1e91d1fc19784238834e"
-  integrity sha512-iSE0dRlnOSVOL07FJq7M0Vvi6se1gaJH196yZ04a1TZmKiDDAoVftl+OOv/sL1RgnOwk67mlsDF9o7p8TkdVmg==
+"@googlemaps/js-api-loader@^1.13.8":
+  version "1.14.3"
+  resolved "https://registry.npmjs.org/@googlemaps/js-api-loader/-/js-api-loader-1.14.3.tgz#d7a161cd547be04ad46a1cb176e6c2647f6d74a7"
+  integrity sha512-6iIb+qpGgQpgIHmIFO44WhE1rDUxPVHuezNFL30wRJnkvhwFm94tD291UvNg9L05hLDSoL16jd0lbqqmdy4C5g==
+  dependencies:
+    fast-deep-equal "^3.1.3"

 "@hapi/address@2.x.x":
  version "2.1.4"
@ -4385,9 +4387,9 @@ extsprintf@^1.2.0:
  resolved "https://registry.yarnpkg.com/extsprintf/-/extsprintf-1.4.0.tgz#e2689f8f356fad62cca65a3a91c5df5f9551692f"
  integrity sha1-4mifjzVvrWLMplo6kcXfX5VRaS8=

-fast-deep-equal@^3.1.1:
+fast-deep-equal@^3.1.1, fast-deep-equal@^3.1.3:
  version "3.1.3"
-  resolved "https://registry.yarnpkg.com/fast-deep-equal/-/fast-deep-equal-3.1.3.tgz#3a7d56b559d6cbc3eb512325244e619a65c6c525"
+  resolved "https://registry.npmjs.org/fast-deep-equal/-/fast-deep-equal-3.1.3.tgz#3a7d56b559d6cbc3eb512325244e619a65c6c525"
  integrity sha512-f3qQ9oQy9j2AhBe/H9VC91wLmKBCCU/gDOnKNAYG5hswO7BLKj09Hc5HYNz9cGI++xlpDCIgDaitVs03ATR84Q==

 fast-glob@^2.0.2:
@ -8311,7 +8313,7 @@ prompts@^2.0.1:
    kleur "^3.0.3"
    sisteransi "^1.0.4"

-prop-types@^15.6.2, prop-types@^15.7.2:
+prop-types@^15.7.2:
  version "15.7.2"
  resolved "https://registry.yarnpkg.com/prop-types/-/prop-types-15.7.2.tgz#52c41e75b8c87e72b9d9360e0206b99dcbffa6c5"
  integrity sha512-8QQikdH7//R2vurIJSutZ1smHYTcLpRWEOlHnzcWHmBYrOGUysKwSsrC89BCiFj3CbrfJ/nXFdJepOVrY1GCHQ==
@ -8996,13 +8998,12 @@ saxes@^3.1.9:
  dependencies:
    xmlchars "^2.1.1"

-scheduler@^0.19.1:
-  version "0.19.1"
-  resolved "https://registry.yarnpkg.com/scheduler/-/scheduler-0.19.1.tgz#4f3e2ed2c1a7d65681f4c854fa8c5a1ccb40f196"
-  integrity sha512-n/zwRWRYSUj0/3g/otKDRPMh6qv2SYMWNq85IEa8iZyAv8od9zDYpGSnpBEjNgcMNq6Scbu5KfIPxNF72R/2EA==
+scheduler@^0.21.0:
+  version "0.21.0"
+  resolved "https://registry.npmjs.org/scheduler/-/scheduler-0.21.0.tgz#6fd2532ff5a6d877b6edb12f00d8ab7e8f308820"
+  integrity sha512-1r87x5fz9MXqswA2ERLo0EbOAU74DpIUO090gIasYTqlVoJeMcl+Z1Rg7WHz+qtPujhS/hGIt9kxZOYBV3faRQ==
  dependencies:
    loose-envify "^1.1.0"
-    object-assign "^4.1.1"

 schema-utils@^1.0.0:
  version "1.0.0"
--- a/package.json
+++ b/package.json
@ -16,7 +16,7 @@
  },
  "scripts": {
    "build": "microbundle-crl -f cjs,umd src/index.cjs.js && microbundle-crl -f es,modern src/index.js",
-    "start": "microbundle-crl watch -f cjs,umd",
+    "start": "microbundle-crl watch -f es,modern src/index.js",
    "prepare": "run-s build",
    "test": "run-s test:unit test:lint test:build",
    "test:build": "run-s build",
@ -55,8 +55,8 @@
    "microbundle-crl": "^0.13.10",
    "npm-run-all": "^4.1.5",
    "prettier": "^2.0.4",
-    "react": "^16.0.0 || ^17.0.2 || ^18.0.0",
-    "react-dom": "^16.0.0 || ^17.0.2 || ^18.0.0",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
    "react-scripts": "^3.4.1"
  },
  "files": [
@ -74,4 +74,4 @@
    "javascript",
    "react-component"
  ]
-}
+}
--- a/src/google_map.js
+++ b/src/google_map.js
@ -259,6 +259,7 @@ class GoogleMap extends Component {

  componentDidMount() {
    this.mounted_ = true;
+    this.markersDispatcher_ = new MarkerDispatcher(this);
    addPassiveEventListener(window, 'resize', this._onWindowResize, false);
    addPassiveEventListener(window, 'keydown', this._onKeyDownCapture, true);
    const mapDom = ReactDOM.findDOMNode(this.googleMapDom_);
--- a/yarn.lock
+++ b/yarn.lock
@ -9470,13 +9470,13 @@ react-dev-utils@^10.2.1:
    strip-ansi "6.0.0"
    text-table "0.2.0"

-"react-dom@^16.0.0 || ^17.0.2 || ^18.0.0":
-  version "18.0.0"
-  resolved "https://registry.yarnpkg.com/react-dom/-/react-dom-18.0.0.tgz#26b88534f8f1dbb80853e1eabe752f24100d8023"
-  integrity sha512-XqX7uzmFo0pUceWFCt7Gff6IyIMzFUn7QMZrbrQfGxtaxXZIcGQzoNpRLE3fQLnS4XzLLPMZX2T9TRcSrasicw==
+react-dom@^18.2.0:
+  version "18.2.0"
+  resolved "https://registry.npmjs.org/react-dom/-/react-dom-18.2.0.tgz#22aaf38708db2674ed9ada224ca4aa708d821e3d"
+  integrity sha512-6IMTriUmvsjHUjNtEDudZfuDQUoWXVxKHhlEGSk81n4YFS+r/Kl99wXiwlVXtPBtJenozv2P+hxDsw9eA7Xo6g==
  dependencies:
    loose-envify "^1.1.0"
-    scheduler "^0.21.0"
+    scheduler "^0.23.0"

 react-error-overlay@^6.0.7:
  version "6.0.7"
@ -9548,10 +9548,10 @@ react-scripts@^3.4.1:
  optionalDependencies:
    fsevents "2.1.2"

-"react@^16.0.0 || ^17.0.2 || ^18.0.0":
-  version "18.0.0"
-  resolved "https://registry.yarnpkg.com/react/-/react-18.0.0.tgz#b468736d1f4a5891f38585ba8e8fb29f91c3cb96"
-  integrity sha512-x+VL6wbT4JRVPm7EGxXhZ8w8LTROaxPXOqhlGyVSrv0sB1jkyFGgXxJ8LVoPRLvPR6/CIZGFmfzqUa2NYeMr2A==
+react@^18.2.0:
+  version "18.2.0"
+  resolved "https://registry.npmjs.org/react/-/react-18.2.0.tgz#555bd98592883255fa00de14f1151a917b5d77d5"
+  integrity sha512-/3IjMdb2L9QbBdWiW5e3P2/npwMBaU9mHCSCUzNln0ZCYbcfTsGbTJrU/kGemdH2IWmB2ioZ+zkxtmq6g09fGQ==
  dependencies:
    loose-envify "^1.1.0"

@ -10145,10 +10145,10 @@ saxes@^3.1.9:
  dependencies:
    xmlchars "^2.1.1"

-scheduler@^0.21.0:
-  version "0.21.0"
-  resolved "https://registry.yarnpkg.com/scheduler/-/scheduler-0.21.0.tgz#6fd2532ff5a6d877b6edb12f00d8ab7e8f308820"
-  integrity sha512-1r87x5fz9MXqswA2ERLo0EbOAU74DpIUO090gIasYTqlVoJeMcl+Z1Rg7WHz+qtPujhS/hGIt9kxZOYBV3faRQ==
+scheduler@^0.23.0:
+  version "0.23.0"
+  resolved "https://registry.npmjs.org/scheduler/-/scheduler-0.23.0.tgz#ba8041afc3d30eb206a487b6b384002e4e61fdfe"
+  integrity sha512-CtuThmgHNg7zIZWAXi3AsyIzA3n4xx7aNyjwC2VJldO2LMVDhFK+63xGqq6CsJH4rTAt6/M+N4GhZiDYPx9eUw==
  dependencies:
    loose-envify "^1.1.0"