Google Map direction - google-maps

Question

I have a google map on a website where I show the position of a business with a custom marker, also, I show the routes to get to the place but I can't seem to understand how to use a custom icon for the START position...
Here is the code I use:
<script>
var directionDisplay;
var directionsService = new google.maps.DirectionsService();
var map;
function initialize() {
directionsDisplay = new google.maps.DirectionsRenderer({draggable: true,suppressMarkers: true});
var latlng = new google.maps.LatLng(45.86140239,-74.062538);
var myOptions = {
zoom:13,
mapTypeId: google.maps.MapTypeId.ROADMAP,
center: latlng,
mapTypeControl: false,
panControl: false,
streetViewControl: false,
zoomControl: false,
}
map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
// Marqueur sur le bureau
var icon = {url: 'marker001c.png'};
var headquartersMarker = new google.maps.Marker({
position: latlng,
map: map,
animation: google.maps.Animation.DROP,
icon: icon,
zIndex:99999
});
directionsDisplay.setMap(map);
}
// Calcule de la route
function calcRoute() {
var start = document.getElementById("start").value;
var end = new google.maps.LatLng(45.86140239,-74.062538);
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);
}
directionsDisplay.setPanel(document.getElementById('panel'));
});
var starticon = new google.maps.MarkerImage('test.png');
var marker = new google.maps.Marker({
position:start,
map: map,
icon: starticon,
});
makeMarker({
position: new google.maps.LatLng(60.17295,24.93981),
content: "Some text in the info bubble.",
title: "Tooltip text"
});
}
</script>
By using this code it show me the end icon (my main marker) but I can't change the start icon. Any idea?

Answer 1

start position as string could be used for DirectionsService but for marker you have to change position to LatLng.
See Geocoding Service
For geocoding add new global variable:
...
var map;
var geocoder;
And initialize it:
function initialize() {
geocoder = new google.maps.Geocoder();
directionsDisplay = new google.maps.DirectionsRenderer({draggable: true, suppressMarkers: true});
...
And get the latlng of the start 'address' after directionsService.route():
geocoder.geocode( { 'address': start}, function(results, status) {
if (status == google.maps.GeocoderStatus.OK) {
map.setCenter(results[0].geometry.location);
var starticon = new google.maps.MarkerImage('images/start.png');
var marker = new google.maps.Marker({
position: results[0].geometry.location,
map: map,
icon: starticon
});
} else {
alert("Geocode failed with status: " + status);
}
});
See example at jsBin. Note: it won't work there because I use my icon images so put in paths to your icon images.