React-google-maps: MarkerWithLabel do not work, cannot read property 'removeChild' of null

[appako]

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)

[NonMint]

I've also seen this behavior as well, I managed to trace down the issue to MarkerClusterer I think. This code works:

{markers!.map((marker: MapTypes.MapMarker, index: number) => ( <MapMarker history={history} marker={marker} key={index} /> ))}

But this code doesn't work:

{markers && ( <MarkerClusterer averageCenter={true} enableRetinaIcons={true} gridSize={60}> {markers.map((marker: MapTypes.MapMarker, index: number) => ( <MapMarker history={history} marker={marker} key={index} /> ))} </MarkerClusterer> )}

[kelfy]

Same here. Definitely something to do with MarkerClusterer

[kelvinlouis]

Are there any workarounds? My client keeps crashing because of it.

[NonMint]

There is a solution posted in the MarkerWithLabel repo, but I haven't tested it locally yet (we just commented out the clusterer). YMMV.

[pdarvas]

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'

[kelfy]

wow.. That's works. That's awesome.

On Wed, Mar 7, 2018 at 7:04 AM, pdarvas [e-mail] wrote:

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'

—
You are receiving this because you commented.
Reply to this email directly, view it on GitHub
https://github.com/tomchentw/react-google-maps/issues/774#issuecomment-370872737,
or mute the thread
https://github.com/notifications/unsubscribe-auth/ABBeptXE5o-BTmFot0r4_pzDDzO4-LT0ks5tbs-qgaJpZM4SG8rT
.

[kentaromiura]

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.

[mlautin]

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

[Avivhdr]

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?

[lironbar]

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?

[Fluidbyte]

@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.

[Phillipip]

Where can i find this patch?

[Fluidbyte]

this comment has it. Weird thing is this morning, though no one on engineering can replicate, we still are seeing errors reported on production, so may not be a silver bullet.

[Fluidbyte]

Ok, so we're still trying to iron this out, but may have found something that _seems_ to fix this:

componentWillUnmount () {
    this.setState({ markers: [] })
}

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 componentWillUnmount and/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.

[Phillipip]

thanks, this patch works really well!

[globeubiquitous]

How to use this patch(https://gist.github.com/kentaromiura/6bb9d0061c92087792f289dfde4989cd) for react-google map? @Phillipip

[Phillipip]

I don't know. I just included it after the clusterscript.

[Avivhdr]

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 markerwithlabel to your package.json so your version will override the react-google-maps's version of markerWithLabel.

[mlautin]

Cannot make it work with just 'npm install markerwithlabel'. Seems like PR to react-google-maps still required.

[Avivhdr]

@mlautin,
add the _--save_
like so:
npm install --save markerwithlabel

[lironbar]

@Avivhdr Do you have any solution for the angular-google-maps library?

[Avivhdr]

@mlautin, I've cancelled the pull request. it is not needed.
In react-google-maps, markerwithlabal is listed as a dependency with the following version:
"markerwithlabel": "^2.0.1"
the ^ sign means that whenever the package is being installed, it will be installed it in the latest patch version.
Which means the every new version of markerwithlabel smaller then 2.1.0 will be automatically installed.
Short explanation here.

[Avivhdr]

@lironbar
No, sorry.

[vpalaciopbcs]

@lironbar did you find a solution for angular-google-maps?