Clicking on other objects on the map removes the google-map from the DOM on Chrome with Shadow DOM

[motss]

Description

Clicking on other objects on the map will make the map container removed from the DOM on Chrome with Shadow DOM enabled.

Expected outcome

Clicking on any objects on the map will show info window and the map container will always on the DOM.

Actual outcome

Map container is removed from the DOM after a few clicks on the objects on the map such as restaurants.

Live Demo

Demo with webcomponents polyfill for other browsers Demo without webcomponents polyfill for Chrome/ Opera

Steps to reproduce

Browsers Affected

• [x] Chrome
• [ ] Firefox
• [ ] Safari 9
• [ ] Safari 8
• [ ] Safari 7
• [ ] Edge
• [ ] IE 11
• [ ] IE 10

[cuzzlor]

I have also raised this as a bug on the google maps API bug list but it was closed, pointing me here.

https://code.google.com/p/gmaps-api-issues/issues/detail?id=11109

However I don't believe it is anything specific to do with the Polymer google-map element because I have replicated this by using the google maps API directly within my own Polymer element. The same behaviour applies therefore I believe it is an issue with the Google Maps API under the Shadow DOM.

[motss]

@cuzzlor I did even try to create my own custom element using the Google Maps API and everything works flawlessly under Shady DOM. When you enable native Shadow DOM, things just go haywire!

[robdodson]

https://github.com/GoogleWebComponents/google-streetview-pano/issues/19#issuecomment-270260866

[ghuntley]

@robdodson thank-you for kicking this along internally.