The way change icon of markers as direction result.

Start: End:


If you want to change icons of direction result, go through these below steps:
 (1) set "suppressMarkers : true" to the DirectionsRenderer.
 (2) and then receive a result of direction, pick up the steps from result.
 (3) After that, put the markers as direction marker by yourself.

There are more details.

(1)Suppress markers

When you show the direction result, you usually use DirectionsRenderer. Creates a instance as DirectionsRenderer, set a value "suppressMarkers : true" as DirectionsRendererOptions like this:

var rendererOptions = {
  map: map,
  suppressMarkers : true
directionsDisplay = new google.maps.DirectionsRenderer(rendererOptions);
As a result, DirectionsRenderer shows only lines. suppressMarkers=true

(2)Pick up steps from DirectionsResult

DirectionsResult passes to a callback of as the first argument.

DirectionsService.route(request:DirectionsRequest, callback:function(DirectionsResult, DirectionsStatus))
It has infomation as result of direction, so you can pick up each steps from there. We needs the marker positions, which is in the directionStep as start_location and end_location. (If you want to see whole information, Google Chrome Developer Tools can catch the result) Pick up steps from direction result.
In this code, that part's code is here:
function showSteps(directionResult) {
  var myRoute = directionResult.routes[0].legs[0];
  for (var i = 0; i < myRoute.steps.length; i++) {

(3)Putting markers

Consequently, put markers at each steps. You can make custom markers. In this example, I used Google Chart Tools: Image Charts for custom icon.

In this code, that part's code is here:

for (var i = 0; i < myRoute.steps.length; i++) {
  var icon = "" + i + "|FF0000|000000";
  if (i == 0) {
    //Icon as start position
    icon = "|car-dealer|00FFFF|FF0000";
  var marker = new google.maps.Marker({
    position: myRoute.steps[i].start_point, 
    map: map,
    icon: icon
  attachInstructionText(marker, myRoute.steps[i].instructions);
//Icon as end position
var marker = new google.maps.Marker({
  position: myRoute.steps[i - 1].end_point, 
  map: map,
  icon: "|ADDE63"
That's all!


<script type='text/javascript'>

  var mapCanvas;
  var directionDisplay;
  var directionsService;
  var stepDisplay;
  var markerArray = [];

  function initialize() {
    // Instantiate a directions service.
    directionsService = new google.maps.DirectionsService();
    // Create a map and center it on Manhattan.
    var manhattan = new google.maps.LatLng(40.7711329, -73.9741874);
    var myOptions = {
      zoom: 13,
      mapTypeId: google.maps.MapTypeId.ROADMAP,
      center: manhattan
    mapCanvas = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
    // Create a renderer for directions and bind it to the map.
    var rendererOptions = {
      map: mapCanvas,
      suppressMarkers : true
    directionsDisplay = new google.maps.DirectionsRenderer(rendererOptions)
    // Instantiate an info window to hold step text.
    stepDisplay = new google.maps.InfoWindow();

  function calcRoute() {
    // First, remove any existing markers from the map.
    for (i = 0; i < markerArray.length; i++) {

    // Now, clear the array itself.
    markerArray = [];

    // Retrieve the start and end locations and create
    // a DirectionsRequest using WALKING directions.
    var start = document.getElementById("start").value;
    var end = document.getElementById("end").value;
    var request = {
        origin: start,
        destination: end,
        travelMode: google.maps.DirectionsTravelMode.WALKING

    // Route the directions and pass the response to a
    // function to create markers for each step.
    directionsService.route(request, function(response, status) {
      if (status == google.maps.DirectionsStatus.OK) {
        var warnings = document.getElementById("warnings_panel");
        warnings.innerHTML = "<b>" + response.routes[0].warnings + "</b>";

  function showSteps(directionResult) {
    // For each step, place a marker, and add the text to the marker's
    // info window. Also attach the marker to an array so we
    // can keep track of it and remove it when calculating new
    // routes.
    var myRoute = directionResult.routes[0].legs[0];
    for (var i = 0; i < myRoute.steps.length; i++) {
      var icon = "" + i + "|FF0000|000000";
      if (i == 0) {
        icon = "|car-dealer|00FFFF|FF0000";
      var marker = new google.maps.Marker({
        position: myRoute.steps[i].start_point, 
        map: mapCanvas,
        icon: icon
      attachInstructionText(marker, myRoute.steps[i].instructions);
    var marker = new google.maps.Marker({
      position: myRoute.steps[i - 1].end_point, 
      map: mapCanvas,
      icon: "|ADDE63"
    google.maps.event.trigger(markerArray[0], "click");

  function attachInstructionText(marker, text) {
    google.maps.event.addListener(marker, 'click', function() {
      // Open an info window when the marker is clicked on,
      // containing the text of the step.
      stepDisplay.setContent(text);, marker);
  google.maps.event.addDomListener(window, "load", initialize);


Google Maps API Programming Guide

Four Google Maps API Experts wrote this book. Introducing useful examples for developers!
See more details