Google Maps SVG marker doesn't display on IE 11
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 is me or a bug with Google Maps.
I've uploaded a JSfiddle of my current code
<html>
<head>
<script type="text/javascript"
src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCyfFUUVxVyoCicnttJfj-w63wzfbTKV3Y&sensor=false">
</script>
<style type="text/css">
html { height: 100% }
body { height: 100%; margin: 0; padding: 0 }
#map-canvas { height: 100% }
</style>
<script>
function initialize() {
var sanfrancisco = new google.maps.LatLng(37.78062,-122.397203);
var mapOptions = {
zoom: 18,
zIndex:0,
center: sanfrancisco,
mapTypeControl: true,
mapTypeControlOptions: {
mapTypeIds: [google.maps.MapTypeId.ROADMAP, 'usroadatlas']
},zoomControl: true,
zoomControlOptions: {
style: google.maps.ZoomControlStyle.SMALL
},
};
var map = new google.maps.Map(document.getElementById('map-canvas'),
mapOptions);
// var image = 'img/1p_marker3.png';
var image = 'http://firstperson.is/assets/img/contact/map_marker.svg';
var marker = new google.maps.Marker({
position: sanfrancisco,
map: map,
icon: image
});
var roadAtlasStyles = [
{
"featureType": "poi",
"elementType": "geometry",
"stylers": [
{ "visibility": "off" }
]
},{
"featureType": "landscape",
"elementType": "geometry.fill",
"stylers": [
{ "color": "#003a70" }
]
},{
"featureType": "landscape",
"elementType": "geometry.stroke",
"stylers": [
{ "color": "#0075c9" }
]
},{
"featureType": "administrative.land_parcel",
"stylers": [
{ "visibility": "off" }
]
},{
"elementType": "labels.text.fill",
"stylers": [
{ "color": "#ffffff" }
]
},{
"elementType": "labels.text.stroke",
"stylers": [
{ "visibility": "off" }
]
},{
"featureType": "road.arterial",
"elementType": "geometry",
"stylers": [
{ "color": "#0075c9" }
]
},{
"featureType": "road",
"elementType": "labels.text.fill",
"stylers": [
{ "color": "#ffffff" }
]
},{
"featureType": "road.local",
"elementType": "geometry",
"stylers": [
{ "color": "#0075c9" }
]
},{
"featureType": "road.highway",
"elementType": "geometry",
"stylers": [
{ "color": "#d0343a" }
]
},{
"featureType": "road.highway.controlled_access",
"elementType": "geometry",
"stylers": [
{ "color": "#ff4539" }
]
},{
"featureType": "transit.line",
"elementType": "geometry",
"stylers": [
{ "color": "#0075c9" }
]
},{
"featureType": "transit",
"elementType": "labels.text.fill",
"stylers": [
{ "color": "#ffffff" }
]
},{
"featureType": "poi",
"elementType": "labels.icon",
"stylers": [
{ "invert_lightness": true },
{ "hue": "#0077ff" }
]
},{
"featureType": "poi",
"elementType": "labels.text",
"stylers": [
{ "visibility": "off" }
]
},{
"featureType": "poi",
"elementType": "labels",
"stylers": [
{ "visibility": "off" }
]
},{
"featureType": "poi.park",
"elementType": "labels.text.fill",
"stylers": [
{ "visibility": "on" },
{"color":"#ffffff"}
]
},{
"featureType": "poi.park",
"elementType": "labels.icon",
"stylers": [
{ "visibility": "on" }
]
},{
"featureType": "poi.sports_complex",
"elementType": "labels.text.fill",
"stylers": [
{ "visibility": "on" },
{"color":"#ffffff"}
]
},{
"featureType": "administrative",
"elementType": "labels.text.fill",
"stylers": [
{ "color": "#ffffff" }
]
},{
"featureType": "administrative.neighborhood",
"elementType": "labels.text",
"stylers": [
{ "visibility": "off" }
]
},{
"featureType": "administrative.province",
"elementType": "geometry",
"stylers": [
{ "visibility": "on" },
{ "weight": 0.9 }
]
}
];
var styledMapOptions = {
name: 'US Road Atlas'
};
var usRoadMapType = new google.maps.StyledMapType(
roadAtlasStyles, styledMapOptions);
map.mapTypes.set('usroadatlas', usRoadMapType);
map.setMapTypeId('usroadatlas');
// var transitLayer = new google.maps.TransitLayer();
// transitLayer.setMap(map);
};
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
<body>
<div id="map-canvas"></div>
</body>
</html>
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
});
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.