Safari 11.1 a problem repeatedly occured

[mariospas]

I am using this element in my webapp and when I open my site via safari 11.1 load 2 times and then I receive this error "a problem repeatedly occured".

I don't have this problem with any other broswher. I have this in mac os x and ipad.

[nicok2]

Same here, but only when map has markers, if it hasn't, map loads correctly.

[Geoffrey-Pliez]

Same for me.
https://www.webcomponents.org/element/GoogleWebComponents/google-map doesn't work on safari 11.1

Issue is on google.maps.Marker because by commenting on 'position', it doesn't crash

_mapReady: function() {
this._listeners = {};
this.marker = new google.maps.Marker({
map: this.map,
// position: {
// lat: parseFloat(this.latitude),
// lng: parseFloat(this.longitude)
// },
title: this.title,

[raphaelmonroe]

Same for me. As @nicok2 mentioned, it only crashes when there are markers.
Opening the official demo page is enough to see the browser crashing:
https://www.webcomponents.org/element/GoogleWebComponents/google-map/demo/demo/index.html

[cwenzelg]

Same for us. We did run into the same issue now. Does anyone have an idea how to fix this already? We will need to find a solution (workaround?) quite soon, as the update keeps spreading and crashes the live pages.

[raphaelmonroe]

@cwenzelg As for now, we're just using the static map API. Markers work there. However, it's indeed static. I'm not sure that can apply to your case.

[cwenzelg]

@raphaelmonroe thanks for your reply. sadly this will not work for the scenario we have right now. so i still hope to find some kind of workaround/hotfix for this element.

[dimassrio]

I have this bug too, maybe @e111077 can help giving on guidance on this.
Will try to fix, and send PR when successful.

[dimassrio]

this specific code is the culprit
new google.maps.Marker({position: position, map: this.map});

And I believe it related to rendering since the crash is not triggering unless the marker latitude / longitude is on screen.

[iSuslov]

Same here, any workaround?

[e111077]

Hello, I'm not the maintainer on this element, but it seems as if this is a bug with Safari that seems to have been fixed in Technology preview.

[dimassrio]

Thank you for your insight @e111077 ,

I can confirm this, no problem whatsoever detected on Safari Technology Preview
Looks like this is those one of the thing we must explain to our client :p

[JaimeFerBec]

I didn't find this issue when I encountered the same problem, so I asked on StackOverflow, and the 2 answers I have received so far there offer not only 2 different workarounds, but also hints about what the problem might be.
It seems to be related to the rendering of the Google Map Marker standard icon in a map that is inside a Shadow DOM. Therefore, if you use a custom icon for your marker in your app, you should not be experiencing the error.
If you want to use the Google Map Marker standard icon, though, there is another workaround: forcing Safari to use the shady DOM polyfill.

You can find both workarounds in detail here: https://stackoverflow.com/questions/50952705/google-map-markers-not-working-with-shadow-dom-in-safari/50959124#50959124