web-dev-qa-db-fra.com

Le marqueur SVG de Google Maps ne s'affiche pas sur IE 11

Mon marqueur de carte SVG disparaît sur IE11. Il est visible dans Chrome, Firefox, Safari, IE9 et 10, mais pas 11. J'ai téléchargé un JSfiddle de mon code actuel. Je ne peux pas dire s'il s'agit de moi ou s'il y a un bug avec Google Maps.

J'ai téléchargé un JSfiddle de mon code actuel

<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>
javascriptgoogle-mapsgoogle-maps-api-3svg
41
creativename

L'ajout de scaledSize à l'image/icône et de optimized: false au marqueur l'a résolu pour moi.

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
});
86
Johan B

Il semble que Google Maps ne supporte pas actuellement l'utilisation de SVG pour les images de marqueur. Vous pouvez cependant avoir des icônes de marqueur vectoriel en utilisant un objet Symbol .

Pour plus de détails, voir ma réponse à cette question .

5
Nick F

J'ai eu un problème très similaire pour un projet, mais j'étais dans une situation où je ne pouvais pas éditer le javascript GM.

Donc, voici une approche CSS que je voudrais partager:

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

Ceci sélectionne uniquement les éléments img qui ont une valeur d'attribut src qui se termine par '. Svg' à l'intérieur de votre GM intégration et les oblige à utiliser les largeur et hauteur de 48px.

J'essaie généralement d'éviter ces balises ! Important - mais dans ce cas, cela était obligatoire, car il faut remplacer certains styles en ligne qui définissent une largeur et une hauteur. de 0px dans IE11.

3
Dirk

J'ai eu le même problème parce que mon filtre ActiveX a été vérifié. Décochez la case (propriétés - sécurité - filtre actifX), puis vous pourrez revoir vos marqueurs . L'erreur est survenue car j'utilise geoxml3.

1
JSqueen

Je ne suis pas sûr que cela aiderait:

Il est sage de définir également width de la zone de la carte. Par exemple:

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

IE10 était le seul à se plaindre de l'absence de la ligne suivante au début

<!DOCTYPE html>

Un commentaire: le marqueur est énorme en gardant la même taille lorsque vous effectuez un zoom arrière.

N'a pas aidé. Exécution du code (avec la ligne DOCTYPE) sur BrowserStack J'ai reçu un message dans la console:

InvalidStateError (line 39)

Et cette ligne ne provient pas du script, car si je modifie/supprime quelque chose, le message est le même.

1
Anto Jurković

Ils disent l'avoir corrigé ici: https://connect.Microsoft.com/IE/feedback/details/793569/ie-11-does-not-dotplay-google-map-markers ... J'ai vérifié sur ma machine 8.1 et cela ne fonctionne pas. 

Je ne l'ai pas encore testé, mais peut-être que ce type l'a bien compris: http://powerhut.co.uk/googlemaps/custom_markers.php

1
Eyal

scaledSize + optimized: false a fait l'affaire.

Scaled Size doit correspondre à la taille taille réelle du image/icône Sprite utilisé.

0
viviansteller