title: How to implement draggable snap to road polyline?
body: <p>Like in title: How to implement polyline snapping to street when marker is dragging? I spent a lot of time seeking answer but I gave up already. I'd like to use only DirectionsService if it is possible without DirectionsRenderer. Below is my cleaned version of code where snapping working not for each but only for last marker and path is not cleaned. Help would be much appreciated.</p>
  
  <p>My code on <a href="http://jsfiddle.net/VgRQ4/" rel="nofollow">jsfiddle</a> and here:</p>
  
  <pre><code>var map,
  path = [],
      markers = [],
      directionsService = new google.maps.DirectionsService(),
      poly;
  
  function addMarker(p) {
      var marker = new google.maps.Marker({
          position: p,
          map: map,
          draggable: true
      });
      markers.push(marker);
  
      google.maps.event.addListener(marker, "drag", function () {
          var request = {
              origin: path[path.length - 1],
              destination: marker.getPosition(),
              travelMode: google.maps.DirectionsTravelMode.DRIVING
          };
          directionsService.route(request, function (response, status) {
              if (status == google.maps.DirectionsStatus.OK) {
                  marker.setPosition(response.routes[0].legs[0].end_location);
                  path = path.concat(response.routes[0].overview_path);
                  poly.setPath(path);
              }
          });
      });
  }
  
  function initialize() {
      var myOptions = {
          zoom: 17,
          center: new google.maps.LatLng(40.7143528, -74.00597310000001),
          mapTypeId: google.maps.MapTypeId.ROADMAP,
          draggableCursor: "crosshair"
      }
  
      map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
  
      google.maps.event.addListener(map, 'click', function (event) {
  
          if (path.length == 0) {
              path.push(event.latLng);
              poly = new google.maps.Polyline({
                  map: map
              });
              poly.setPath(path);
              addMarker(event.latLng);
          } else {
              var request = {
                  origin: path[path.length - 1],
                  destination: event.latLng,
                  travelMode: google.maps.DirectionsTravelMode.DRIVING
              };
              directionsService.route(request, function (response, status) {
                  if (status == google.maps.DirectionsStatus.OK) {
                      addMarker(response.routes[0].legs[0].end_location);
  
                      path = path.concat(response.routes[0].overview_path);
                      poly.setPath(path);
                  }
              });
          }
      });
  }
  </code></pre>