How to show the direction of From address into To address

Question

I got Latitude and Longitude value for this code, here after I want to show direction of FROM address into TO address, I don't know pls help...

<script type="text/javascript">
        window.onload = function () {
            var mapOptions = {
                center: new google.maps.LatLng(12.9715987, 77.59456269999998),//FROM address Latitude , Longitude value
                zoom: 14,
                mapTypeId: google.maps.MapTypeId.ROADMAP
            };
            var infoWindow = new google.maps.InfoWindow();
            var latlngbounds = new google.maps.LatLngBounds();
            var map = new google.maps.Map(document.getElementById("dvMap"), mapOptions);
            google.maps.event.addListener(map, 'click', function (e) {
                alert("Latitude: " + e.latLng.lat() + "\r\nLongitude: " + e.latLng.lng());// i got TO address Latitude , Longitude value
            });
        }
    </script>

<div id="dvMap" style="width: 300px; height: 300px">

Do you want the driving directions? If so, [this question](https://stackoverflow.com/questions/5959788/google-maps-api-v3-how-show-the-direction-from-a-point-a-to-point-b-blue-line?rq=1) deals with that. — Coert Grobbelaar, Jan 04 '16 at 06:27
i already seen this example ,this one for if we are clicking the google map means it will coming to zoom,for me don't want like this,i want show the direction of clicking the place — Kasthuri .k, Jan 04 '16 at 06:31
It would be helpful if you could link us to an example of what you want to achieve. You could also attempt to clarify the question. — Coert Grobbelaar, Jan 04 '16 at 06:41

score 0 · Answer 1 · answered Jan 04 '16 at 11:13

Hi This one will Helpfull for you , Small Example of Direction Service, i'm using the center point of FROM address , and TO address where ever you clicking it will takes the TO address . the map draw the driving root .

    <!DOCTYPE html>
    <html>
      <head>
        <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
        <meta charset="utf-8">
        <title>Google Maps JavaScript API v3 Example: Directions Travel Modes</title>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
        <script src="https://maps.googleapis.com/maps/api/js?sensor=false"></script>
        <input type="text" id="from_Latlng" value="12.9301397, 77.58773180000003" />
        <input type="text" id="to_Latlng" value="" />
        <script>
        $(function(){ initialize();  });
          var directionDisplay;
          var directionsService = new google.maps.DirectionsService();
          var map;

         function initialize() {

          var From = new google.maps.LatLng(12.9301397, 77.58773180000003);
          var to_latLng=$("#to_Latlng").val();
          if(to_latLng!='')
          {
                var to_LatLngSplit=to_latLng.split(",");
                var to_lat=to_LatLngSplit[0];
                var to_lng=to_LatLngSplit[1];
                var to = new google.maps.LatLng(to_lat,to_lng);
          }
          else
          {
            var to = new google.maps.LatLng(12.9997841, 77.68394269999999);
          }
            directionsDisplay = new google.maps.DirectionsRenderer();
            var mapOptions = {
              zoom: 14,
              mapTypeId: google.maps.MapTypeId.ROADMAP,
              center: From
            }
            map = new google.maps.Map(document.getElementById('map_canvas'), mapOptions);
          // If there are any parameters at eh end of the URL, they will be in  location.search
          var lat,lng,zoom,type;
          //looking something like  "?marker=3"
          directionsDisplay.setMap(map);
          calcRoute(From,to);

                google.maps.event.addListener(map, 'click', function (e) {
                     //alert("Latitude: " + e.latLng.lat() + "\r\nLongitude: " + e.latLng.lng());// i got TO address Latitude , Longitude value
                     $('#to_Latlng').val(e.latLng.lat()+","+e.latLng.lng());
                     initialize();
                });

         }

          function calcRoute(From,to) {
            var selectedMode = "DRIVING";
            var request = {
                origin: From,
                destination: to,
                travelMode: google.maps.TravelMode[selectedMode]
            };
            directionsService.route(request, function(response, status) {
              if (status == google.maps.DirectionsStatus.OK) {
                directionsDisplay.setDirections(response);
              } else { 
                alert("Directions Request Failed, "+status);
              }
            });
          }
        </script>
      </head>
      <body onload="initialize()">
        <div>
        <b>Mode of Travel: </b>
        </div>
        <div id="map_canvas" style="height: 450px;"></div>
      </body>
    </html>

Demo

I want like this answer,your demo will be working fine,i copy the same code but its not working for me,onclick means nothing it will happen — Kasthuri .k, Jan 05 '16 at 04:29
[link](https://developers.google.com/maps/documentation/javascript/examples/directions-travel-modes) . can you go through the google maps route map driving documentations . — varun kumar, Jan 05 '16 at 06:44

How to show the direction of From address into To address

1 Answers1