javascript - example - google maps markers icons

Crear un ícono svg de varios colores para marcador de mapa de google

Question

Quiero agregar un icono de svg al marcador de google map. Ahora mismo puedo crear un ícono svg por una sola ruta. Encuentre el código a continuación:

    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";
icon = {
    path: car
    , scale: 1
    , strokeColor: ''white''
    , strokeWeight: .10
    , fillOpacity: 1
    , fillColor: ''#8dc63f''
    , offset: ''100%'', //rotation: parseInt(heading[0]),
    anchor: new google.maps.Point(10, 25)
};
marker.setIcon(icon);

Y paso el ícono a marcador para mostrar el ícono en el mapa. Y este es un camino único.

Y ahora quiero crear un ícono con múltiples colores usando la ruta svg. Entonces, ¿alguien puede publicar sobre cómo crear un ícono de ruta de svg multicolor y pasarlo a un marcador de mapa de google?

Answer 1

Según este enlace , puede usar una URL de data:image contiene SVG para el icono de un marcador.

var $markerImage = document.querySelector(''.markerImage''),
  markerImageSvg = $markerImage.innerHTML || '''';
var marker = new google.maps.Marker({
    position: map.getCenter(),
    map: map,
    clickable: false,
    icon: {
      anchor: new google.maps.Point(16, 16),
      url: ''data:image/svg+xml;charset=utf-8,'' + encodeURIComponent(markerImageSvg.replace(''{{background}}'', colors[0]))
    }
  });

prueba de concepto violín

fragmento de código:

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

  var $markerImage = document.querySelector(''.markerImage''),
    markerImageSvg = $markerImage.innerHTML || '''';
  new google.maps.Marker({
    position: map.getCenter(),
    map: map,
    clickable: false,
    icon: {
      anchor: new google.maps.Point(16, 16),
      url: ''data:image/svg+xml;charset=utf-8,'' + encodeURIComponent(markerImageSvg.replace(''{{background}}'', "#FF4847"))
    }
  });
}
google.maps.event.addDomListener(window, "load", initialize);

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

<script src="https://maps.googleapis.com/maps/api/js"></script>
<div id="map_canvas"></div>
<div class="markerImage">
  <svg width="32" height="32" viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg">
    <defs>
      <linearGradient id="myGradient" gradientUnits="userSpaceOnUse" x1="5" y1="16" x2="27" y2="16" gradientTransform="rotate(90 16 16)">
        <stop offset="0" stop-color="white" />
        <stop offset="1" stop-color="black" />
      </linearGradient>
      <filter id="dropshadow">
        <feGaussianBlur in="SourceAlpha" stdDeviation="1" />
        <feOffset dx="0" dy="0" result="offsetblur" />
        <feFlood flood-color="#000" flood-opacity=".25" />
        <feComposite in2="offsetblur" operator="in" />
        <feMerge>
          <feMergeNode/>
          <feMergeNode in="SourceGraphic" />
        </feMerge>
      </filter>
    </defs>
    <path fill="{{background}}" stroke="white" stroke-width="1.5" style="filter:url(#dropshadow)" d="M3.5 3.5h25v25h-25z" />
    <path opacity=".15" fill="url(#myGradient)" d="M5 5h22v22H5z" />
    <path fill="#88D063" d="m12.18182,8.90909v2.72727c0,1.8 1.5,2.78182 3.27273,2.72727v7.09091c-0.88691,-1.77273 -2.72727,-3.81818 -5.45455,-2.72727c0,0 1.63636,4.36364 6,4.36364s6,-4.36364 6,-4.36364c-2.72727,-1.09091 -4.56873,0.95455 -5.45454,2.72727v-7.09091c1.77272,0.05455 3.27273,-0.92727 3.27273,-2.72727v-2.72727l-2.18182,2.18182l-1.63636,-2.18182l-1.63636,2.18182l-2.18182,-2.18182z"
    />
  </svg>
</div>