title: Unable to Add custom Marker to Point A and B of Direction Service
body: <p>Can you please take a look at this <a href="http://jsfiddle.net/Behseini/5UYHA/3/" rel="nofollow">jsfiddle</a> link and let me know why I am not able to add custom markers to Start (A) and end (B) points of the direction service?</p>
  
  <p>As you can see the direction service works correctly however I am not able to add the markers to the map!</p>
  
  <p>Here is my code:</p>
  
  <pre class="lang-js prettyprint-override"><code>var directionsDisplay;
  var start = document.getElementById('start').value;
  var end = "1883 Walnut Cres, Coquitlam V3J 7T3";
  var directionsService = new
  google.maps.DirectionsService();
  
  function initialize() {
    directionsDisplay = new google.maps.DirectionsRenderer({suppressMarkers: true});
       // Start/Finish icons
   var icons = {
    start: new google.maps.MarkerImage(
     // URL
     'https://maps.google.com/mapfiles/kml/shapes/schools_maps.png',
     // (width,height)
     new google.maps.Size( 44, 32 ),
     // The origin point (x,y)
     new google.maps.Point( 0, 0 ),
     // The anchor point (x,y)
     new google.maps.Point( 22, 32 )
    ),
    end: new google.maps.MarkerImage(
     // URL
     'https://maps.google.com/mapfiles/kml/shapes/schools_maps.png',
     // (width,height)
     new google.maps.Size( 44, 32 ),
     // The origin point (x,y)
     new google.maps.Point( 0, 0 ),
     // The anchor point (x,y)
     new google.maps.Point( 22, 32 )
    )
   };
    var mapOptions = {
      zoom: 17,
      mapTypeId: google.maps.MapTypeId.ROADMAP,
      center: new google.maps.LatLng(49.258423,-122.841913)
    };
    var map = new google.maps.Map(document.getElementById('map-canvas'),
        mapOptions);
    directionsDisplay.setMap(map);
    directionsDisplay.setPanel(document.getElementById('directions-panel'));
  
    var control = document.getElementById('control');
    control.style.display = 'block';
    map.controls[google.maps.ControlPosition.TOP_CENTER].push(control);
  }
  
  function calcRoute() {
     var request = {
      origin: start,
      destination: end,
      travelMode: google.maps.TravelMode.DRIVING
    };
    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' );
      }
    });
  }
  function makeMarker( position, icon, title ) {
   new google.maps.Marker({
    position: position,
    map: map,
    icon: icon,
    title: title
   });
  }
  google.maps.event.addDomListener(window, 'load', initialize);
  </code></pre>