Custom icon image on google map polyline - google-maps

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%'
}],
});

Answer 1

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>