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

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>