putting only symbolpath icon in current position - google-maps-api-3

Question

I am trying to put symbol path icon on the current position of the route,but the icon did not show on the map.
var carPath = new google.maps.MVCArray();
for ( var i = 0; i < path_start.length; i++) {
if(i === 0) {
carPath.push(path_start[i]);
carPolyline.setPath(carPath);
} else {
setTimeout((function(latLng) {
return function() {
new google.maps.Marker({
map: map,
icon:{
path:google.maps.SymbolPath.FORWARD_CLOSED_ARROW,
scale:3,
strokeColor: 'white',
strokeWeight: 1,
fillOpacity: 0.8,
fillColor: 'orange',
offset: '100%'
},
position: path_start[i],
});
carPath.push(latLng);
};
})(path_start[i]), 100 * i);
}
}
Thank you in advance.
http://jsfiddle.net/jemz24/kSKGs/3/

Answer 1

The name of the variable that holds the google.maps.LatLng object you need inside the anonymous function is latLng, not path_start[i]
working fiddle
Change:
new google.maps.Marker({
map: map,
icon:{
path:google.maps.SymbolPath.FORWARD_CLOSED_ARROW,
scale:3,
strokeColor: 'white',
strokeWeight: 1,
fillOpacity: 0.8,
fillColor: 'orange',
offset: '100%'
},
position: path_start[i]
});
to:
new google.maps.Marker({
map: map,
icon:{
path:google.maps.SymbolPath.FORWARD_CLOSED_ARROW,
scale:3,
strokeColor: 'white',
strokeWeight: 1,
fillOpacity: 0.8,
fillColor: 'orange',
offset: '100%'
},
position: latLng
});
More likely what you want updated fiddle
Add the icon to the polyline, don't make it a marker.
var lineSymbol = {
path: google.maps.SymbolPath.FORWARD_CLOSED_ARROW
};
var carPolyline = new google.maps.Polyline({
map: map,
geodesic : true,
strokeColor : '#FF0000',
strokeOpacity : 1.0,
strokeWeight : 2,
icons: [{
icon: lineSymbol,
offset: '100%'
}],
});