Custom icon image on google map polyline

Question

Need to add Custom icon image on google map poly line, i tried using to add custom icon like marker it's not working. This is the code i have tried but not working.

var lineSymbol = {
    anchor: new google.maps.Point(0, 32),
    origin: new google.maps.Point(0, 0),
    scaledSize: new google.maps.Size(32, 32),
    size: new google.maps.Size(64, 64),
    url: "http://www.developerdrive.com/wp-content/uploads/2013/08/ddrive.png"
  };
  var Line = new google.maps.Polyline({
    path: path,
    geodesic: true,
    strokeColor: "#35495e",
    strokeOpacity: 0.8,
    strokeWeight: 4,
    icons: [{
            icon: lineSymbol,
            offset: '100%'
          }],
  });

geocodezip · Answer 1 · 2019-03-29T13:31:51.737

That method only works with SVG Symbols. In this case, just use a google.maps.Marker at the end of the path.

var lineSymbol = new google.maps.Marker({
    icon: {
      anchor: new google.maps.Point(0, 32),
      origin: new google.maps.Point(0, 0),
      scaledSize: new google.maps.Size(32, 32),
      size: new google.maps.Size(64, 64),
      url: "http://www.developerdrive.com/wp-content/uploads/2013/08/ddrive.png"
    },
    position: path[path.length-1],
    map: map
});

proof of concept fiddle

code snippet:

function initMap() {
  var map = new google.maps.Map(document.getElementById('map'), {
    zoom: 3,
    center: {
      lat: 0,
      lng: -180
    },
    mapTypeId: 'terrain'
  });

  var path = [{lat: 37.772,lng: -122.214},
    {lat: 21.291,lng: -157.821},
    {lat: -18.142,lng: 178.431},
    {lat: -27.467,lng: 153.027}
  ];
  var lineSymbol = new google.maps.Marker({
    icon: {
      anchor: new google.maps.Point(16, 16), // center icon on end of polyline
      origin: new google.maps.Point(0, 0),
      scaledSize: new google.maps.Size(32, 32),
      size: new google.maps.Size(64, 64),
      url: "https://i.stack.imgur.com/7Fzjf.png"
    },
    position: path[path.length - 1],
    map: map
  });
  var Line = new google.maps.Polyline({
    path: path,
    geodesic: true,
    strokeColor: "#35495e",
    strokeOpacity: 0.8,
    strokeWeight: 4,
    icons: [{
      icon: lineSymbol,
      offset: '100%'
    }],
  });
  Line.setMap(map);
  var bounds = new google.maps.LatLngBounds();
  for (var i = 0; i < Line.getPath().getLength(); i++) {
    bounds.extend(Line.getPath().getAt(i));
  }
  map.fitBounds(bounds);
}

html,
body,
#map {
  height: 100%;
  margin: 0;
  padding: 0;
}

<div id="map"></div>
<!-- Replace the value of the key parameter with your own API key. -->
<script async defer src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk&callback=initMap"></script>

With this approach the marker is just separated from the polyline, you can't move it thanks to the offset — Diogyn, Jun 10 '20 at 14:59
That is true. As I said in my answer: "That method only works with SVG Symbols. In this case, just use a google.maps.Marker at the end of the path." (the case being that the icon was at an offset of 100%) — geocodezip, Jun 10 '20 at 15:27
@geocodezip is it possible to use a multi path SVG or only a single path one? — Allerion, Nov 11 '22 at 07:37
Yes, it is possible to use a multi path SVG (but not as a symbol). If you are having difficulties, please post a new question with a [mcve] that demonstrates the issue. — geocodezip, Nov 12 '22 at 18:02
See [How to use SVG with multiple paths in Google Maps marker JavaScript?](https://stackoverflow.com/questions/66268996/how-to-use-svg-with-multiple-paths-in-google-maps-marker-javascript) — geocodezip, Nov 12 '22 at 18:04

Custom icon image on google map polyline

1 Answers1