Google Maps SVG marker doesn't display on IE 11

前端未结

关注

 5  1382

My SVG map marker disappears on IE11. It\'s visible in Chrome, Firefox, Safari, IE9 & 10, but not 11. I\'ve uploaded a JSfiddle of my current code. I can\'t tell if this

相关标签:

5条回答

抹茶落季

2020-12-08 02:36

Adding scaledSize to the image/icon and optimized: false to the marker solved it for me.

http://jsfiddle.net/kQRbr/31/

var image = {
    url: 'https://cdnjs.cloudflare.com/ajax/libs/foundicons/3.0.0/svgs/fi-marker.svg',
    scaledSize: new google.maps.Size(100, 100),
}

var marker = new google.maps.Marker({
    position: sanfrancisco,
    map: map,
    optimized: false,
    icon: image
});

0 讨论(0)

时光说笑

2020-12-08 02:37

I had the same problem because my ActiveX-filter was checked. Uncheck (properties - safety - activeX filter), then you can see your markers again. The error occured because I am using geoxml3.

0 讨论(0)
发布评论:

提交评论
- 加载中...
不思量自难忘°

2020-12-08 02:43

It seems Google Maps currently doesn't support using SVGs for marker images. You can have vector marker icons though, by using a Symbol object.

For more details, see my answer to this question.

0 讨论(0)
发布评论:

提交评论
- 加载中...
日久生厌

2020-12-08 02:52
I am not sure if this would help:

It is wise to define also width of map area. For example:
```
#map-canvas { height: 100%; width: 100%; }
```
IE10 was the only one complaining that there is no the following line at beginning
```
<!DOCTYPE html>
```
One comment: marker is huge keeping the same size when you zoom out.

Didn't help. Running code (with DOCTYPE line) at BrowserStack I got message in console:
```
InvalidStateError (line 39)
```
And this line is not from the script because if I change/delete something the message is the same.
0 讨论(0)
发布评论:

提交评论
- 加载中...
旧巷少年郎

2020-12-08 02:55
I had a very similar issue for a project, but I was in a situation where I couldn't edit the GM javascript.

So, here is a CSS approach I'd like to share:
```
#someGoogleMapsWrapperHere .gm-style img[src$='.svg'] {
    width: 48px !important;
    height: 48px !important;
}
```
This only selects img elements which have a src attribute value that ends with '.svg' inside your GM integration and forces them to use the width and height of 48px.

I usually try to avoid those !important tags - but in this case it was mandatory, because it has to overrule some inline styles that define a width and height of 0px in IE11.
0 讨论(0)
发布评论:

提交评论
- 加载中...