MarkerWithLabel: Cannot read property 'removeChild' of null

[awiprayitno]

In combination with MarkerClusterer, error happened when MarkerClusterer remove Marker
Error was:
Uncaught TypeError: Cannot read property 'removeChild' of null at MarkerLabel_.onRemove (eval at <anonymous> (markerwithlabel_packed.js:1), <anonymous>:1:5570)
Note that this error happened both on the packed and non packed version.

Solution:
I added two ifs in the following (line 307), which fixed this.
MarkerLabel_.prototype.onRemove = function () { var i; if (this.labelDiv_.parentNode) { this.labelDiv_.parentNode.removeChild(this.labelDiv_); } // Remove event listeners: if (this.listeners_) { for (i = 0; i < this.listeners_.length; i++) { google.maps.event.removeListener(this.listeners_[i]); } } };

[EltonFaust]

Thanks a lot, really worked 😄

[cmorgant]

Unfortunately, I've noticed that today without changing any dependencies!
Do you now why this is happening?

[EltonFaust]

Something changed in this new google maps js, version 3.32.1a, if you specify an older version like 3.31 (https://maps.googleapis.com/maps/api/js?v=3.31&key=xxx) this problem doesnt happens...

[rushtoner]

Agreed that it appears to be related to Google's changes. Spent all day trying to track it down. Specifying an older version with v= in the API URL fixes things, at least for now.

[lignumaqua]

Just confirming that I'm having the same problem with the latest maps API rev. Your change to line 307 fixed it for me. Thanks!

[nabeel-akram]

I am using react-google-maps and no specific version was mentioned in the API URL. May be it was by default hitting the latest API.
I was having some other issues like, wasn't able to click on markers, when clicked on cluster other markers which are not part of that cluster would appear as well.
Specifying an older version with v= solved all these issues for me as well

[javierartero]

Fixing the version to 3.31, the error is solved.

Another option is to check that it is not null

line 309

this.labelDiv_.parentNode.removeChild(this.labelDiv_);

replace by

if (this.labelDiv_.parentNode){
    this.labelDiv_.parentNode.removeChild(this.labelDiv_);
 }

[stephenmcd]

Thanks for the feedback - I've just pushed the suggested fix.

[vstyle]

Efficient! Thanks

[nayv]

@stephenmcd , your fix in 045398d was removed in 759d133
Any specific reason for that action or is a merge error?

[rolf-schmidiger]

@awiprayitno , thanks man. Worked for me.
But line number was 336 in "my" (and also current) version:
759d133

[garylittleRLP]

My fault; this change wasn't integrated when I uploaded all the fixes I had made for the past few years. I will fix later today.

[rroblik]

Hi,

I'm using nodejs https://www.npmjs.com/package/markerwithlabel ; how to apply this "patch" ?

Regards

[kevosomi]

@EltonFaust Thank you! That saved my hair.

[AustinHunt]

This seems like it has returned. Any confirmation?

[pbadeer]

This is also causing issues for us, any many folks using react-google-maps.

tomchentw/react-google-maps#774

Could you please re-open this?

[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?

[haider-ali]

I am facing the issue Uncaught TypeError: Cannot read property 'parentNode' of null
at ImageOverlay.onRemove (VM263 arcgislink.js:3742) any fix availble?

[jeudywr]

Also experiencing this issue, started to notice it today.

Uncaught TypeError: Cannot read property 'removeChild' of null

[BHare1985]

@jeudywr @haider-ali try this #450

[garylittleRLP]

I have tried MarkerWithLabel with all the sample code using the latest experimental release of GM and I don't see any errors. Does anyone have a simple example that illustrates the problem?

[jeudywr]

@garylittleRLP you can check this app I work for:

https://wikirealty.com/search/chicago-il-us/

In the console, you will see the errors. We use markers with labels (through the angular google maps library that uses MarkerWithLabel) to put property prices in the map. It was working fine until today. We were referencing version 3.31 of google maps.

ps: we are putting a patch tonight so the example will no longer be available in a few hours.

[Phillipip]

same problem here: https://www.ebab.com/Europe/Germany/Berlin

[AustinHunt]

The issue we were having in NomadGraphix/google-react-maps was that googlemaps/v3-utility-library/tree/master/markerwithlabel started failing with the latest version of google maps.

The solution? We are temporarily using this fork of MarkerWithLabel which solves the issue: egdbear/node-MarkerWithLabel

What we need is a merge with MarkerWithLabel that fixes this issue. Please see this thread to see why the change is necessary: node-MarkerWithLabel

[AustinHunt]

Another note, I think the issue may stem from using both the Google Maps Clusterer and MarkerWithLabel in tandem.

[Phillipip]

this patch works: https://gist.github.com/kentaromiura/6bb9d0061c92087792f289dfde4989cd

[Avivhdr]

@NomadGraphix
It happens when using MarkerWithLabel & clustering together, but it also happens when i just used markerWithLabel without clustering.

Google's v3-utility-library has made the necessary fix in markerWithLabel in this commit, about 5 month ago.

Projects that use jesstelford/node-MarkerWithLabel library are actually using it's version of markerWithLabel, which is an old version and was not updated with the fix and therefore the problem still exist.

My problem is a little bit more complex because I do not use directly the jesstelford/node-MarkerWithLabel library. I use react-google-maps library which uses node-MarkerWithLabel internally in it's package.json.

I've made a PR to jesstelford/node-MarkerWithLabel , and hopefully he will approve it or do the fix him self.

[stephenmcd]

For anyone hitting this issue as a result of using third-party forks of MarkerWithLabel bundled as a Node.js package - the up to date version of MarkerWithLabel maintained in this repository was recently made available as the NPM package @google/markerwithlabel, so migrating to that should resolve the issue and prevent delays in the future.

[Avivhdr]

my PR that fixes the issue on jesstelford/node-MarkerWithLabel was approved.
Updating to version 2.0.2 solves the issue.

[lironbar]

I updated the markerWithLabel dependency to "^2.0.2" and still having this issue in the angular-google-maps library. does anyone have a solution?

[sakhisheikh]

@Avivhdr I have made a PR to fix onRemove validation in react google maps by upgrading the version to 2.0.2. Once it gets approved we all can use it like a charm.
here is the PR:
tomchentw/react-google-maps#894

[Avivhdr]

Hi @sakhisheikh, Very good for the initiative!
But actually this pull request is not needed.
Read this and look at react-google-maps package.json

@lironbar If you will delete the react-google-maps folder from your node module and re install react-google-maps, it should be ok.

[sakhisheikh]

Hi @Avivhdr thanks for informing.I'm closing the PR. I just saw it is already merged in #892 of react-google-maps.