title: Change individual markers in google maps directions
body: <p>I have an issue with adding individual markers in Google maps API. I searched a lot like the following link, <a href="https://stackoverflow.com/questions/4813728/change-individual-markers-in-google-maps-directions-api-v3">Change individual markers in google maps directions api V3</a> . But I am unable to implement the same on my code. With the help of <code>suppressMarkers: true</code> I am able to prevent the default markers. Now only route directions are showing. Now how can I add the makers for start point and end point. Following is my code. </p>
  
  <pre><code>   function GoogleMap_selected(){
  
          var lattitude_value= document.getElementById('slectedLat').value;
          var longitude_value= document.getElementById('slectedLon').value;
  
          var from = new google.maps.LatLng(mylatitude, mylongitude);
          var to = new google.maps.LatLng(lattitude_value, longitude_value);
  
           var directionsService = new google.maps.DirectionsService();
           var directionsRequest = {
             origin: from,
             destination: to,
             travelMode: google.maps.DirectionsTravelMode.DRIVING,
             unitSystem: google.maps.UnitSystem.METRIC
           };
  
          this.initialize = function(){
          var map = showMap_selected();
  
           directionsService.route(
                    directionsRequest,
                    function(response, status)
                    {
  
                      if (status == google.maps.DirectionsStatus.OK)
                      {
                        new google.maps.DirectionsRenderer({
                          map: map,
                          directions: response,
                          suppressMarkers: true
  
                        });
                      }
                      else
                          {
                           alert("Unable to retrive route");
                          }
                  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
   });
  }
  
   var icons = {
    start: new google.maps.MarkerImage(
     // URL
     'start.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
     'end.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 showMap_selected = function(){
              var mapOptions = {
              zoom: 12,
              center: new google.maps.LatLng(lattitude_value, longitude_value),
              mapTypeId: google.maps.MapTypeId.ROADMAP
              };
              var map = new google.maps.Map(document.getElementById("selected_map_canvas"), mapOptions);
              return map;
          }
          }
  </code></pre>
  
  <p>Can anyone suggest me that how to implement adding of markers at both start and end points with respect to my code.</p>