Comments (12)
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
from google-map.
Same here, but only when map has markers, if it hasn't, map loads correctly.
from google-map.
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,
from google-map.
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
from google-map.
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.
from google-map.
@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.
from google-map.
@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.
from google-map.
I have this bug too, maybe @e111077 can help giving on guidance on this.
Will try to fix, and send PR when successful.
from google-map.
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.
from google-map.
Same here, any workaround?
from google-map.
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.
from google-map.
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
from google-map.
Related Issues (20)
- Plans for additional components?
- Google-map-marker: it can't clear it's listeners HOT 1
- icon property broken in google-map-marker HOT 1
- Undefined in _clearListener in google-map-marker HOT 2
- Google-map-marker: Adding more doc for icon property
- google-map-poly can't be created dynamically HOT 4
- google-map-marker component not showing HOT 1
- Polymer lint
- Lowercase m,k,- and some other keyboard keys stop working in the <input> element after opening and touching Google Maps - All platforms HOT 3
- Impossible to enter chars 'k' or 'm' in any input after dragging the map.. Weird bug. HOT 6
- Copyright notice shown twice when in Shadow DOM
- Map objects persist in memory after component is detached
- google-map-marker: data-binding for *hidden* fails
- html template is missing in google-map HOT 3
- Add label properties to google-map-marker
- Image inside the buttons are being rendered three times HOT 7
- Marker animation DROP and BOUNCE not working in @em-polymer/google-map HOT 1
- Marker info window styles broken HOT 2
- The google-map had no function GetPointAtDistance
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from google-map.