react-google-maps: MarkerWithLabel do not work, cannot read property 'removeChild' of null
A few days ago MarkerWithLabel stopped working Before that everything worked fine In the browser, I noticed an error …
Uncaught TypeError: Cannot read property 'removeChild' of null
at MarkerLabel_.onRemove (index.js:325)
at Ez.ug (overlay.js:4)
at Gz (overlay.js:1)
at Object.Xk (overlay.js:5)
at js?v=3.exp&key=AIzaSyBt_qVRW8YYbccOObNdiN_MPskqQcUeu7A&libraries=visualization,places&language=uk:140
at Object._.Q (js?v=3.exp&key=AIzaSyBt_qVRW8YYbccOObNdiN_MPskqQcUeu7A&libraries=visualization,places&language=uk:62)
at MarkerLabel_._.Xg.map_changed (js?v=3.exp&key=AIzaSyBt_qVRW8YYbccOObNdiN_MPskqQcUeu7A&libraries=visualization,places&language=uk:140)
at Tc (js?v=3.exp&key=AIzaSyBt_qVRW8YYbccOObNdiN_MPskqQcUeu7A&libraries=visualization,places&language=uk:50)
at MarkerLabel_._.m.set (js?v=3.exp&key=AIzaSyBt_qVRW8YYbccOObNdiN_MPskqQcUeu7A&libraries=visualization,places&language=uk:122)
at MarkerLabel_.setMap (js?v=3.exp&key=AIzaSyBt_qVRW8YYbccOObNdiN_MPskqQcUeu7A&libraries=visualization,places&language=uk:53)
at MarkerWithLabel.setMap (index.js:591)
at Cluster.addMarker (markerclusterer.js:502)
at MarkerClusterer.addToClosestCluster_ (markerclusterer.js:1458)
at MarkerClusterer.createClusters_ (markerclusterer.js:1517)
at MarkerClusterer.redraw_ (markerclusterer.js:1373)
at MarkerClusterer.repaint (markerclusterer.js:1319)
at MarkerClusterer.componentDidUpdate (MarkerClusterer.js:139)
at measureLifeCyclePerf (ReactCompositeComponent.js:75)
at ReactCompositeComponent.js:728
at CallbackQueue.notifyAll (CallbackQueue.js:76)
at ReactReconcileTransaction.close (ReactReconcileTransaction.js:80)
at ReactReconcileTransaction.closeAll (Transaction.js:209)
About this issue
- Original URL
- State: open
- Created 6 years ago
- Reactions: 9
- Comments: 24
I solved it by changing the version of the google api from the experimental version to v3.31
before:
export const GOOGLE_API = 'https://maps.googleapis.com/maps/api/js?key=AIzaSyDk-SZbgOovJvTafj7feDjxUIXUrW0L9vY&v=3.exp&libraries=geometry,drawing,places'after:
export const GOOGLE_API = 'https://maps.googleapis.com/maps/api/js?key=AIzaSyDk-SZbgOovJvTafj7feDjxUIXUrW0L9vY&v=3.31&libraries=geometry,drawing,places'I’m receiving this error since yesterday. I’ve been using version 3.31 of google maps. I’ve updated the Google Maps version to 3.32 (and tried also at 3.33 & 3.34) and the error still occurs.
The solution mention above (changing the markerLabel’s on remove method) fixes the problem but only locally. I need a fix that does not include changing the node modules.
Does any one else started experience this problem since yesterday?
The problem was not in this library, but in jesstelford/node-MarkerWithLabel library, which is in
react-google-mapsdependencies.I have made a PR to jesstelford/node-MarkerWithLabel that was approved a few hours ago with the proper fix.
I have also made a PR to react-google-maps that update the markerWithLabel library.
Until this PR is Approved, another solution is to
npm install --save markerwithlabelto yourpackage.jsonso your version will override the react-google-maps’s version ofmarkerWithLabel.Same here, since yesterday I’m receiving this error every time the UI renders the markers with clustering
The issue is not only for the react google maps library, it is also in the angular google maps library
Any solution for that?
I don’t know. I just included it after the clusterscript.
Ok, so we’re still trying to iron this out, but may have found something that seems to fix this:
I noticed this problem is very easy to replicate locally (without the monkey-patch above) by running HMR, so I assumed it must be something with lifecycle. Explicitly setting our markers to an empty array as shown above seems to stop the error, but will update if I find more information.
Update:
Seem to still have the issue even with
componentWillUnmountand/or the monkey patch. Clearly a race condition, can minimize it significantly but not eradicate. At this point unsure of next thing to try so probably going back to beet farming.@kentaromiura’s monkey patch worked great for me - not ideal obviously, but just created a js file, included a
<script>tag with it right under my Google API script load and the problem stopped.The solution with 3.31 does not work anymore. “Versions 3.0 to 3.31 have been deleted.”
https://developers.google.com/maps/documentation/javascript/versions#choosing-a-version-number
In case it could help others, I wrote this monkey-patch last week: https://gist.github.com/kentaromiura/6bb9d0061c92087792f289dfde4989cd I only found this issue today, thanks for suggesting changing the url from experimental to a fixed version, that fixed another issue I was having.