Comments (7)
The problem seems to have appeared when the google maps api has been updated from version 3.34 to 3.35.
Styles for Pegman view fails from version 3.33.
The icons are bit smaller in version 3.33 and should not be used as it will be the first one to be unavailable later on.
The icon sizes are better in version 3.34 so you can use this as a temporary solution.
The styles starts to fail from version 3.35, the current latest version.
You can use the version attribute to apply the previous version of the google map api as a temporary solution instead of using default version="3.exp".
<google-map version="3.34">
Here is the link for google maps api version documentation.
https://developers.google.com/maps/documentation/javascript/versions
from google-map.
This bug ist fixed for API version 3.35 with one of the latest Quartlery Updates: https://developers.google.com/maps/documentation/javascript/versions#quarterly-updates
from google-map.
As mentioned @hellokatili this issue is no longer persists.
[Fixed] Map button styles broken when in shadow root
from google-map.
Same here.
@dakotaJang Have you found any temporary solution?
Because I can only think of either solving the issue on my own fork of the project, or downgrading to v1.2.0, where it's not happening. But I'm guessing downgrading will mean dealing with other issues already resolved.
from google-map.
I have taken a look at the google-map component code, but I haven't been able to easily figure out what is making those 3 images appear.
I don't have the time to look into it deeply, so for the time being I am using this horribly ugly solution:
const mapDiv = this.$.map.root.querySelector('#map');
const controls = mapDiv.querySelectorAll('.gm-control-active');
controls.forEach(c => {
while(c.children.length > 1) {
c.removeChild(c.children[1]);
};
});
Note that this
denotes my own component, where I am using a <google-map id='map' ...>
. Thus the this.$.map
to retrieve the component, and then .root
to access its Shadow-DOM.
from google-map.
The ".gm-control-active" style classes injected into the document head by Google Maps are not applied properly. I think those styles should be inside the google-map
tag (Shadow DOM does not allow overwriting) to be applied.
from google-map.
Created an issue on Google Maps for that case since I am having the same problem in my own web component (not google-map
). Issue link
Maybe this issue could also be closed since is not on google-map
side.
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
- Safari 11.1 a problem repeatedly occured HOT 12
- 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
- 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.