Маркер SVG для Google Maps не отображается в IE 11

Мой маркер SVG-карты исчезает в IE11. Это видно в Chrome, Firefox, Safari, IE9 и 10, но не 11. Я загрузил JSfiddle моего текущего кода. Я не могу сказать, что это я или ошибка с Картами Google.

Я загрузил JSfiddle моего текущего кода

<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>

Ответы

Ответ 1

Добавление scaledSize в изображение/значок и optimized: false к маркеру разрешило его для меня.

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
});

Ответ 2

Кажется, Google Maps в настоящее время не поддерживает использование SVG для изображений маркеров. У вас могут быть значки векторных маркеров, но с помощью объекта Symbol.

Подробнее см. мой ответ на этот вопрос.

Ответ 3

Я не уверен, помогло бы это:

Целесообразно также определить width области карты. Например:

#map-canvas { height: 100%; width: 100%; }

IE10 был единственным, кто жаловался, что в начале

нет следующей строки: 
<!DOCTYPE html>

Один комментарий: маркер огромный, сохраняя тот же размер, когда вы уменьшаете масштаб.

Не помогло. Запуск кода (с помощью строки DOCTYPE) в BrowserStack. Я получил сообщение в консоли:

InvalidStateError (line 39)

И эта строка не из script, потому что, если я меняю/удаляю что-то, то сообщение будет одинаковым.

Ответ 5

У меня была такая же проблема, потому что мой ActiveX-фильтр был проверен. Снимите флажок (свойства - безопасность - фильтр activeX), затем вы можете снова увидеть свои маркеры. Ошибка произошла, потому что я использую geoxml3.

Ответ 6

scaledSize + optimized: false сделал трюк.

Масштабированный размер должен быть реальным размером спрайта image/icon.

Ответ 7

У меня была очень похожая проблема для проекта, но я был в ситуации, когда я не мог редактировать GM-JavaScript.

Итак, вот CSS-подход, которым я хотел бы поделиться:

#someGoogleMapsWrapperHere .gm-style img[src$='.svg'] {
    width: 48px !important;
    height: 48px !important;
}

При этом выбираются только те элементы img, которые имеют значение атрибута src, оканчивающееся на " .svg " внутри вашей интеграции GM, и заставляют их использовать ширину и высоту 48 пикселей.

Я обычно стараюсь избегать этих важных тегов! - но в этом случае это было обязательно, потому что он должен отменять некоторые встроенные стили, которые определяют ширину и высоту 0px в IE11.