Custom Google Map markers on Directions API - google-maps

Question

I'm totally new to the Google maps api, and after putting together several examples found around the web, I'm struggling on the last hurdle of adding custom markers to the directions. Here's my code:
var directionDisplay;
var directionsService = new google.maps.DirectionsService();
function initialize() {
var latlng = new google.maps.LatLng([[showMapLatitude]],[[showMapLongitude]]);
directionsDisplay = new google.maps.DirectionsRenderer({suppressMarkers: true});
var myOptions = {
zoom: 14,
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP,
mapTypeControl: false
};
var stylez = [
{
featureType: "all",
elementType: "all",
stylers: [
{ saturation: -100 }
]
}
];
var image = new google.maps.MarkerImage('/icon.png',
new google.maps.Size(20, 33),
new google.maps.Point(0,0),
new google.maps.Point(10,33)
);
var map = new google.maps.Map(document.getElementById("map_canvas"),myOptions);
var mapType = new google.maps.StyledMapType(stylez, { name:"Grayscale" });
map.mapTypes.set('tehgrayz', mapType);
map.setMapTypeId('tehgrayz');
directionsDisplay.setMap(map);
directionsDisplay.setPanel(document.getElementById("directionsPanel"));
var marker = new google.maps.Marker({
position: latlng,
map: map,
title:"[[*pagetitle]]",
icon: image
});
}
function calcRoute() {
$(".storeDetails").hide();
$(".storeAdress").hide();
$(".backtocontact").show();
var start = document.getElementById("routeStart").value;
var end = "[[showMapLatitude]],[[showMapLongitude]]";
var request = {
origin:start,
destination:end,
travelMode: google.maps.DirectionsTravelMode.DRIVING
};
directionsService.route(request, function(response, status) {
if (status == google.maps.DirectionsStatus.OK) {
directionsDisplay.setDirections(response);
}
});
}
There's an example of how to do it here: Change individual markers in google maps directions api V3
But being a noob, I can't seem to drop that in the right place here, it either errors or does nothing.

Answer 1

Change
directionsService.route(request, function(response, status) {
if (status == google.maps.DirectionsStatus.OK) {
directionsDisplay.setDirections(response);
}
});
To
directionsService.route(request, function(response, status) {
if (status == google.maps.DirectionsStatus.OK) {
directionsDisplay.setDirections(response);
var leg = response.routes[ 0 ].legs[ 0 ];
makeMarker( leg.start_location, icons.start, "title" );
makeMarker( leg.end_location, icons.end, 'title' );
}
});
And don't forget to add makeMarker() function.
Also you will need both start and end icons

Answer 2

In reply to comment in my other answer
To remove original custom marker and show default marker
Delete
var image = new google.maps.MarkerImage('/icon.png',
new google.maps.Size(20, 33),
new google.maps.Point(0,0),
new google.maps.Point(10,33)
);
and
var marker = new google.maps.Marker({
position: latlng,
map: map,
title:"[[*pagetitle]]",
icon: image
});
Also change
directionsDisplay = new google.maps.DirectionsRenderer({suppressMarkers: true});
To
directionsDisplay = new google.maps.DirectionsRenderer();