Menu
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> 
204
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.
39
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
