Clickable Driving Direction on Google Maps v3

Question

I'm making a google maps project and need to create a route clicking on it.

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.

I made another project that you can click to draw the route but it don't have markers, and is not draggabble, this is my actual project with the full code I will post here a short code only with my directions.

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

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);    
    })      

}   

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'.

    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);    
    })      

This is my test with the full code

Answer 1

Concept: (sounds like this is what you want)

1. add a click event listener to the map
2. when the user clicks the map add a draggable marker (I would add a click listener to it so they can delete it by clicking on it)
3. when the user clicks on the map a second time add a second draggable marker
4. when the second marker is added, call the directions service with the position of the two markers.
5. if either marker is dragged call the directions service again.

(if this what you are trying and are running into problems, code or a live link would be helpful)

You are missing #3 and #4

Working example

code snippet:

var map, ren, ser;
var data = {};
var data2 = {};
var marker;
var infowindow;
var doMark = true;
var directionsDisplay;

var wayA;
var wayB;

//Função de Inicio

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
    }
    //Cria o mapa do google, coloca as definições do mapa, como tipo de visualização, pode ser ROADMAP, SATELLITE, HYBRID, TERRAIN
  map = new google.maps.Map(mapDiv, mapOptions);


  var control = document.createElement('DIV');
  control.style.padding = '1px';
  control.style.border = '1px solid #000';
  control.style.backgroundColor = 'white';
  control.style.cursor = 'pointer';
  control.innerHTML = '<img src="https://web.archive.org/web/20151226013612if_/http://i47.tinypic.com/2dlp2fc.jpg" border="0" alt="Image and video hosting by TinyPic">';
  control.index = 1;


  map.controls[google.maps.ControlPosition.TOP_RIGHT].push(control);

  google.maps.event.addDomListener(control, 'click', function() {
    doMark = false;
    markNow();


  });

  google.maps.event.addListener(map, "click", function(event) {
    if (!wayA) {
      wayA = new google.maps.Marker({

        position: event.latLng,
        map: map

      });
    } else {
      wayB = new google.maps.Marker({

        position: event.latLng,
        map: map

      });

      //Renderiza a rota, o draggable é diz se o waypoint é arrastavel ou não
      ren = new google.maps.DirectionsRenderer({
        'draggable': true
      });
      ren.setMap(map);
      ren.setPanel(document.getElementById("directionsPanel"));
      ser = new google.maps.DirectionsService();

      //Cria a rota, o DirectionTravelMode pode ser: DRIVING, WALKING, BICYCLING ou TRANSIT
      ser.route({
        'origin': wayA.getPosition(),
        'destination': wayB.getPosition(),
        'travelMode': google.maps.DirectionsTravelMode.DRIVING
      }, function(res, sts) {
        if (sts == 'OK') ren.setDirections(res);
      })

    }
  });
}

var html = "<table>" +
  "<tr><td>Nome:</td> <td><input type='text' id='name'/> </td> </tr>" +
  "<tr><td>Endereco:</td> <td><input type='text' id='address'/></td> </tr>" +
  "<tr><td>Tipo:</td> <td><select id='type'>" +
  "<option value='oficina' SELECTED>oficina</option>" +
  "<option value='restaurante'>restaurante</option>" +
  "</select> </td></tr>" +
  "<tr><td></td><td><input type='button' value='Salvar' onclick='saveData()'/></td></tr>";
infowindow = new google.maps.InfoWindow({
  content: html
});

google.maps.event.addDomListener(window, 'load', goma);

html,
body {
  height: 100%;
  width: 100%;
}

<script src="https://maps.google.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk"></script>
<div id="mappy" style="float:left;width:70%; height:100%"></div>
<div id="directionsPanel" style="float:right;width:30%;height 100%"></div>
<div>
  <label>Endereco</label>
</div>