title: Clickable Driving Direction on Google Maps v3
body: <p>I'm making a google maps project and need to create a route clicking on it.</p>
  
  <p>My project has 2 points that has a predefined lat and lng, and I want to draw by myself the start and the end of the point A and B and don't lose it functionality.</p>
  
  <p>I made another project that you can click to draw the route but it don't have markers, and is not draggabble, <a href="http://www.inventoresdegaragem.com/dbteste/index.htm" rel="nofollow noreferrer">this is my actual project</a> with the full code 
  I will post here a short code only with my directions.</p>
  
  <p>I want that my first click to the point A and the second my point B, and them the possibility to drag them, like the project linked</p>
  
  <pre><code>function goma()
  {   
      var mapDiv = document.getElementById('mappy');
      var mapOptions = {
      zoom: 12, 
      center: new google.maps.LatLng(-23.563594, -46.654239),
      mapTypeId : google.maps.MapTypeId.ROADMAP
      }
      pode ser ROADMAP, SATELLITE, HYBRID, TERRAIN
      map = new google.maps.Map( mapDiv, mapOptions ); 
  
      //Render route, etc.
      ren = new google.maps.DirectionsRenderer( {'draggable':true} );
      ren.setMap(map);
      ren.setPanel(document.getElementById("directionsPanel"));
      ser = new google.maps.DirectionsService();
  
      //Create the route
      ser.route({ 'origin': new google.maps.LatLng(-23.563594, -46.654129), 'destination':  new google.maps.LatLng(
  -23.563672, -46.640396), 'travelMode': google.maps.DirectionsTravelMode.DRIVING},function(res,sts) {
          if(sts=='OK')ren.setDirections(res);    
      })      
  
  }   
  </code></pre>
  
  <p>I'm updating here my code, I done only wayA, that is the first waypoint, the second is a latLng predefined, where you click, it gets the latLng and put inside the 'origin'.</p>
  
  <pre><code>    google.maps.event.addListener(map, "click", function(event) {
              wayA = new google.maps.Marker({ 
                position: event.latLng,
                map: map                
              });
       });
      ren = new google.maps.DirectionsRenderer( {'draggable':true} );
      ren.setMap(map);
      ren.setPanel(document.getElementById("directionsPanel"));
      ser = new google.maps.DirectionsService();          
      ser.route({ 'origin': wayA, 'destination':  new google.maps.LatLng(
  -23.563672, -46.640396), 'travelMode': google.maps.DirectionsTravelMode.DRIVING},function(res,sts) {
          if(sts=='OK')ren.setDirections(res);    
      })      
  </code></pre>
  
  <p><a href="http://www.inventoresdegaragem.com/dbteste/index.htm" rel="nofollow noreferrer">This is my test with the full code</a></p>