marqueur rotate svg avec plusieurs chemins en utilisant des cartes javascript google

Question

Lorsque j'utilise le SVG ci-dessous simple, il fonctionne bien avec la méthode de rotation

var car = "M17.402,0H5.643C2.526,0,0,3.467,0,6.584v34.804c0,3.116,2.526,5.644,5.643,5.644h11.759c3.116,0,5.644-2.527,5.644-5.644 V6.584C23.044,3.467,20.518,0,17.402,0z M22.057,14.188v11.665l-2.729,0.351v-4.806L22.057,14.188z M20.625,10.773 c-1.016,3.9-2.219,8.51-2.219,8.51H4.638l-2.222-8.51C2.417,10.773,11.3,7.755,20.625,10.773z M3.748,21.713v4.492l-2.73-0.349 V14.502L3.748,21.713z M1.018,37.938V27.579l2.73,0.343v8.196L1.018,37.938z M2.575,40.882l2.218-3.336h13.771l2.219,3.336H2.575z M19.328,35.805v-7.872l2.729-0.355v10.048L19.328,35.805z"; 

var icon = { 
path: car, 
scale: .7, 
strokeColor: 'white', 
strokeWeight: .10, 
fillOpacity: 1, 
fillColor: '#404040', 
offset: '5%', 
anchor: new google.maps.Point(10, 25) 
}; 

comme indiqué ci-dessous:

function animate(d) { 
    if (d > eol) { 

     marker.setPosition(endLocation.latlng); 
     return; 
    } 
    var p = polyline.GetPointAtDistance(d); 
    //map.panTo(p); 
    var lastPosn = marker.getPosition(); 
    marker.setPosition(p); 
    var heading = google.maps.geometry.spherical.computeHeading(lastPosn, p); 
    icon.rotation = heading; 
    marker.setIcon(icon); 
    updatePoly(d); 
    timerHandle = setTimeout("animate(" + index + "," + (d + step) + ")", tick); 
} 

mais quand je remplacerai avec un autre SVG complexe (couleur multi) la rotation ne fonctionne plus:

<svg version="1.1" id="Layer_2" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" 
    width="20px" height="60px" viewBox="0 0 47.333 101.667" enable-background="new 0 0 47.333 101.667" 
    xml:space="preserve"> 
<path fill="#E58E1A" d="M42.667,27.849c0,1.096-0.434,2.484-1.602,2.484H6.911c-1.169,0-2.244-1.388-2.244-2.484V14.818 
    c0-1.096,1.076-1.484,2.244-1.484h34.153c1.169,0,1.602,0.388,1.602,1.484V27.849z"/> 
<path fill="#E58E1A" d="M42.667,93.849c0,1.096-0.438,2.484-1.617,2.484H6.588c-1.179,0-1.921-1.388-1.921-2.484V80.818 
    c0-1.096,0.742-1.484,1.921-1.484H41.05c1.179,0,1.617,0.388,1.617,1.484V93.849z"/> 
<path fill="#FCB040" d="M41.667,96.383c0,1.009-0.919,1.95-2.007,1.95H7.33c-1.088,0-1.663-0.941-1.663-1.95V24.16 
    c0-1.009,0.575-1.827,1.663-1.827h32.33c1.088,0,2.007,0.818,2.007,1.827V96.383z"/> 
<path fill="#F2A339" stroke="#F7931E" stroke-miterlimit="10" d="M23.062,15.586c6.86,0,13.104,2.407,16.104,5.972V10.077 
    c0-0.6,0.151-1.13-0.226-1.491c-1.777-4.399-7.782-5.348-15.185-5.348c-7.403,0-13.898,0.949-15.675,5.348 
    c-0.377,0.361-0.914,0.891-0.914,1.491v11.261C11.167,17.896,16.346,15.586,23.062,15.586z"/> 
<path fill="#45525B" d="M23.073,24.249c6.134,0,11.593,2.152,14.593,5.34V19.323c0-0.536-0.422-1.011-0.759-1.333 
    c-1.588-3.933-7.237-4.781-13.855-4.781c-6.619,0-12.203,0.848-13.791,4.781c-0.337,0.323-0.594,0.797-0.594,1.333v10.069 
    C11.667,26.313,17.068,24.249,23.073,24.249z"/> 
<path fill="#050E22" d="M9.348,25.917L4.34,27.635l-0.65,0.223c-0.359,0.123-0.55,0.514-0.427,0.873l0.223,0.65 
    c0.123,0.359,0.494,0.493,0.853,0.37l0.65-0.223c0.359-0.123,0.325-1.169,0.325-1.169l4.357-1.495 
    c0.359-0.123,0.61-0.337,0.487-0.696C10.036,25.808,9.706,25.794,9.348,25.917z"/> 
<path fill="#050E22" d="M38.07,25.917l5.007,1.718l0.65,0.223c0.359,0.123,0.55,0.514,0.427,0.873l-0.223,0.65 
    c-0.123,0.359-0.494,0.493-0.853,0.37l-0.65-0.223c-0.359-0.123-0.325-1.169-0.325-1.169l-4.357-1.495 
    c-0.359-0.123-0.61-0.337-0.487-0.696C37.381,25.808,37.711,25.794,38.07,25.917z"/> 
<path fill="#45525B" d="M37.667,28.333c0,1.105-1.055,2-2.189,2H10.829c-1.134,0-2.162-0.895-2.162-2v-3c0-1.105,1.028-2,2.162-2 
    h24.649c1.134,0,2.189,0.895,2.189,2V28.333z"/> 
<path fill="#314349" d="M27.135,17c3.704,0,7.209,0.677,10.101,1.831c-0.107-0.33-0.271-0.623-0.5-0.841 
    c-1.588-3.933-7.151-4.781-13.77-4.781s-12.16,0.848-13.748,4.781c-0.337,0.323-0.551,0.797-0.551,1.333v7.688 
    C9.667,21.373,17.676,17,27.135,17z"/> 
<path fill="#F9BB42" stroke="#FBB03B" stroke-miterlimit="10" d="M23.015,15.586c5.949,0,11.548,0.836,14.714,4.402l-1.433-9.911 
    c0-0.6-0.493-1.13-0.82-1.491c-1.541-4.399-6.006-5.348-12.426-5.348c-6.42,0-10.899,0.949-12.44,5.348 
    c-0.327,0.361-0.694,0.891-0.694,1.491L8.86,19.552C12.026,16.11,17.19,15.586,23.015,15.586z"/> 
<g> 
    <path fill="#4F6671" d="M32.667,48.333c0,0.552-0.448,1-1,1h-15c-0.552,0-1-0.448-1-1v-6c0-0.552,0.448-1,1-1h15 
     c0.552,0,1,0.448,1,1V48.333z"/> 
    <path fill="#424F58" d="M26.604,42.458c2.296,0,4.402,0.611,6.063,1.627v-1.752c0-0.552-0.448-1-1-1h-15c-0.552,0-1,0.448-1,1v6 
     c0,0.552,0.448,1,1,1h0.283C17.289,45.494,21.476,42.458,26.604,42.458z"/> 
</g> 
<path fill="#4F6671" d="M32.667,91.333c0,0.552-0.448,1-1,1h-15c-0.552,0-1-0.448-1-1v-6c0-0.552,0.448-1,1-1h15 
    c0.552,0,1,0.448,1,1V91.333z"/> 
<path fill="#424F58" d="M26.604,85.458c2.296,0,4.402,0.611,6.063,1.627v-1.752c0-0.552-0.448-1-1-1h-15c-0.552,0-1,0.448-1,1v6 
    c0,0.552,0.448,1,1,1h0.283C17.289,88.494,21.476,85.458,26.604,85.458z"/> 
<g> 
    <g> 
     <path fill="#4F6671" d="M38.875,55.333c-0.115,0-0.208-0.437-0.208-0.873V42.622c0-0.436,0.093-0.289,0.208-0.289h1.25 
      c0.115,0,0.542-0.147,0.542,0.289v11.838c0,0.436-0.427,0.873-0.542,0.873H38.875z"/> 
     <path fill="#424F58" d="M40.099,50.507c0,1.812-0.127,3.826-0.339,4.826h0.365c0.115,0,0.542-0.437,0.542-0.873V42.622 
      c0-0.436-0.427-0.289-0.542-0.289h-1.25c-0.115,0-0.208-0.147-0.208,0.289v0.223C39.466,43.113,40.099,46.459,40.099,50.507z"/> 
    </g> 
    <g> 
     <path fill="#4F6671" d="M38.875,40.333c-0.115,0-0.208-0.437-0.208-0.873V27.622c0-0.436,0.093-0.289,0.208-0.289h1.25 
      c0.115,0,0.542-0.147,0.542,0.289v11.838c0,0.436-0.427,0.873-0.542,0.873H38.875z"/> 
     <path fill="#424F58" d="M40.099,35.507c0,1.812-0.127,3.826-0.339,4.826h0.365c0.115,0,0.542-0.437,0.542-0.873V27.622 
      c0-0.436-0.427-0.289-0.542-0.289h-1.25c-0.115,0-0.208-0.147-0.208,0.289v0.223C39.466,28.113,40.099,31.459,40.099,35.507z"/> 
    </g> 
    <g> 
     <path fill="#4F6671" d="M8.125,28.333c0.115,0,0.542-0.147,0.542,0.289v11.838c0,0.436-0.427,0.873-0.542,0.873h-1.25 
      c-0.115,0-0.208-0.437-0.208-0.873V28.622c0-0.436,0.093-0.289,0.208-0.289H8.125z"/> 
     <path fill="#424F58" d="M7.068,32.868c0-1.812-0.039-3.535,0.172-4.535H6.875c-0.115,0-0.208-0.147-0.208,0.289v11.838 
      c0,0.436,0.093,0.873,0.208,0.873h1.25c0.115,0,0.542-0.437,0.542-0.873v-0.223C7.667,39.969,7.068,36.915,7.068,32.868z"/> 
    </g> 
    <g> 
     <path fill="#4F6671" d="M38.875,69.333c-0.115,0-0.208-0.437-0.208-0.873V56.622c0-0.436,0.093-0.289,0.208-0.289h1.25 
      c0.115,0,0.542-0.147,0.542,0.289v11.838c0,0.436-0.427,0.873-0.542,0.873H38.875z"/> 
     <path fill="#424F58" d="M40.099,64.507c0,1.812-0.127,3.826-0.339,4.826h0.365c0.115,0,0.542-0.437,0.542-0.873V56.622 
      c0-0.436-0.427-0.289-0.542-0.289h-1.25c-0.115,0-0.208-0.147-0.208,0.289v0.223C39.466,57.113,40.099,60.459,40.099,64.507z"/> 
    </g> 
    <g> 
     <path fill="#4F6671" d="M38.875,83.333c-0.115,0-0.208-0.104-0.208-0.539V70.956c0-0.436,0.093-0.622,0.208-0.622h1.25 
      c0.115,0,0.542,0.186,0.542,0.622v11.838c0,0.436-0.427,0.539-0.542,0.539H38.875z"/> 
     <path fill="#424F58" d="M40.099,78.674c0,1.812-0.127,3.66-0.339,4.66h0.365c0.115,0,0.542-0.103,0.542-0.539V70.956 
      c0-0.436-0.427-0.622-0.542-0.622h-1.25c-0.115,0-0.208,0.186-0.208,0.622v0.223C39.466,71.447,40.099,74.626,40.099,78.674z"/> 
    </g> 
    <g> 
     <path fill="#4F6671" d="M38.875,97.333c-0.115,0-0.208-0.437-0.208-0.873V84.622c0-0.436,0.093-0.289,0.208-0.289h1.25 
      c0.115,0,0.542-0.147,0.542,0.289v11.838c0,0.436-0.427,0.873-0.542,0.873H38.875z"/> 
     <path fill="#424F58" d="M40.099,92.507c0,1.812-0.127,3.826-0.339,4.826h0.365c0.115,0,0.542-0.437,0.542-0.873V84.622 
      c0-0.436-0.427-0.289-0.542-0.289h-1.25c-0.115,0-0.208-0.147-0.208,0.289v0.223C39.466,85.113,40.099,88.459,40.099,92.507z"/> 
    </g> 
</g> 
<g> 
    <g> 
     <path fill="#4F6671" d="M6.875,55.333c-0.115,0-0.208-0.437-0.208-0.873V42.622c0-0.436,0.093-0.289,0.208-0.289h1.25 
      c0.115,0,0.542-0.147,0.542,0.289v11.838c0,0.436-0.427,0.873-0.542,0.873H6.875z"/> 
     <path fill="#424F58" d="M8.099,50.507c0,1.812-0.127,3.826-0.339,4.826h0.365c0.115,0,0.542-0.437,0.542-0.873V42.622 
      c0-0.436-0.427-0.289-0.542-0.289h-1.25c-0.115,0-0.208-0.147-0.208,0.289v0.223C7.466,43.113,8.099,46.459,8.099,50.507z"/> 
    </g> 
    <g> 
     <path fill="#4F6671" d="M6.875,69.333c-0.115,0-0.208-0.437-0.208-0.873V56.622c0-0.436,0.093-0.289,0.208-0.289h1.25 
      c0.115,0,0.542-0.147,0.542,0.289v11.838c0,0.436-0.427,0.873-0.542,0.873H6.875z"/> 
     <path fill="#424F58" d="M8.099,64.507c0,1.812-0.127,3.826-0.339,4.826h0.365c0.115,0,0.542-0.437,0.542-0.873V56.622 
      c0-0.436-0.427-0.289-0.542-0.289h-1.25c-0.115,0-0.208-0.147-0.208,0.289v0.223C7.466,57.113,8.099,60.459,8.099,64.507z"/> 
    </g> 
    <g> 
     <path fill="#4F6671" d="M6.875,83.333c-0.115,0-0.208-0.104-0.208-0.539V70.956c0-0.436,0.093-0.622,0.208-0.622h1.25 
      c0.115,0,0.542,0.186,0.542,0.622v11.838c0,0.436-0.427,0.539-0.542,0.539H6.875z"/> 
     <path fill="#424F58" d="M8.099,78.674c0,1.812-0.127,3.66-0.339,4.66h0.365c0.115,0,0.542-0.103,0.542-0.539V70.956 
      c0-0.436-0.427-0.622-0.542-0.622h-1.25c-0.115,0-0.208,0.186-0.208,0.622v0.223C7.466,71.447,8.099,74.626,8.099,78.674z"/> 
    </g> 
    <g> 
     <path fill="#4F6671" d="M6.875,97.333c-0.115,0-0.208-0.437-0.208-0.873V84.622c0-0.436,0.093-0.289,0.208-0.289h1.25 
      c0.115,0,0.542-0.147,0.542,0.289v11.838c0,0.436-0.427,0.873-0.542,0.873H6.875z"/> 
     <path fill="#424F58" d="M8.099,92.507c0,1.812-0.127,3.826-0.339,4.826h0.365c0.115,0,0.542-0.437,0.542-0.873V84.622 
      c0-0.436-0.427-0.289-0.542-0.289h-1.25c-0.115,0-0.208-0.147-0.208,0.289v0.223C7.466,85.113,8.099,88.459,8.099,92.507z"/> 
    </g> 
</g> 
</svg> 

Simple SVG

Complex SVG

Que dois-je faire pour résoudre ce problème?

Answer 1

Pour afficher l'icône SVG complète (avec tous ses chemins), enregistrez-la sous forme de fichier, puis utilisez-la comme URL pour le marqueur.

question connexe: Rotate marker on google maps with svg

proof of concept fiddle

var geocoder; 
 
var map; 
 

 
function initialize() { 
 
    var map = new google.maps.Map(
 
    document.getElementById("map_canvas"), { 
 
     center: new google.maps.LatLng(37.4419, -122.1419), 
 
     zoom: 13, 
 
     mapTypeId: google.maps.MapTypeId.ROADMAP 
 
    }); 
 

 
    marker = new google.maps.Marker({ 
 
    position: map.getCenter(), 
 
    map: map, 
 
    optimized: false, 
 
    icon: { 
 
     url: "http://www.geocodezip.com/mapIcons/SO_20170925_multiplePaths_mod.svg", 
 
     anchor: new google.maps.Point(39, 60), 
 
     size: new google.maps.Size(150, 150) 
 
    }, 
 
    }); 
 
    var measle = new google.maps.Marker({ 
 
    position: map.getCenter(), 
 
    map: map, 
 
    optimized: false, 
 
    icon: { 
 
     url: "https://maps.gstatic.com/intl/en_us/mapfiles/markers2/measle.png", 
 
     size: new google.maps.Size(7, 7), 
 
     anchor: new google.maps.Point(3.5, 3.5) 
 
    } 
 
    }) 
 

 
    var rotationAngle = 10; 
 
    google.maps.event.addListenerOnce(map, 'idle', function() { 
 
    setInterval(function() { 
 
     $('img[src="http://www.geocodezip.com/mapIcons/SO_20170925_multiplePaths_mod.svg"]').css({ 
 
     'transform': 'rotate(' + rotationAngle + 'deg)', 
 
     'transform-origin': '39px 60px' 
 
     }); 
 
     rotationAngle += 10; 
 
     rotationAngle %= 360; 
 
    }, 1000); 
 
    }); 
 
} 
 
google.maps.event.addDomListener(window, "load", initialize);

html, 
 
body, 
 
#map_canvas { 
 
    height: 100%; 
 
    width: 100%; 
 
    margin: 0px; 
 
    padding: 0px 
 
} 
 

 
.mapLabels { 
 
    color: "white" 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://maps.googleapis.com/maps/api/js"></script> 
 
<div id="map_canvas"></div> 
 
<img src="http://www.geocodezip.com/mapIcons/SO_20170925_multiplePaths_mod.svg" />