Home/ Questions/Q 9014133
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-16T03:26:13+00:00

Somewhere at stackoverflow I found this (slightly modified by me) to render basic driving

  • 0

Somewhere at stackoverflow I found this (slightly modified by me) to render basic driving instructions from Google maps:

<!DOCTYPE html>
<html> 
<head> 
   <meta http-equiv="content-type" content="text/html; charset=UTF-8"/> 
   <title>Google Maps API v3 Directions Example</title> 
   <script type="text/javascript" 
           src="http://maps.google.com/maps/api/js?sensor=false&language=de"></script>
</head> 
<body style="font-family: Arial; font-size: 12px;"> 
   <div style="width: 600px;">
     <div id="map" style="width: 500px; height: 400px; float: left;"></div> 
     <div id="panel" style="width: 500px; float: left;"></div> 
   </div>

   <script type="text/javascript"> 

     var directionsService = new google.maps.DirectionsService();
     var directionsDisplay = new google.maps.DirectionsRenderer();

     var map = new google.maps.Map(document.getElementById('map'), {
       zoom:7,
       mapTypeId: google.maps.MapTypeId.ROADMAP
     });

     directionsDisplay.setMap(map);
     directionsDisplay.setPanel(document.getElementById('panel'));

     var request = {
       origin: 'An der Alster 1, Hamburg', 
       destination: 'Albada 1, Cala Llombards, Mallorca',
       travelMode: google.maps.DirectionsTravelMode.DRIVING
     };

     directionsService.route(request, function(response, status) {
       if (status == google.maps.DirectionsStatus.OK) {
         directionsDisplay.setDirections(response);
       }
     });
   </script> 
</body> 
</html>

I have modified the example a bit to fit my Kindle screen – now, as my JavaScript is really bad – how do I update this to have two text boxes at the top to ask for origin and destination, and maybe two radio boxes to let me select the value for travelMode (DRIVINGand WALKING)?

Thanks!

Full copy-and-paste answer:

<!DOCTYPE html>
<html> 
<head> 
   <meta http-equiv="content-type" content="text/html; charset=UTF-8"/> 
   <title>Google Maps API v3 Directions Example</title> 
   <script type="text/javascript" 
           src="http://maps.google.com/maps/api/js?sensor=false&language=de"></script>
</head> 
<body style="font-family: Arial; font-size: 12px;"> 

Start:<input type="text" id="start"><br>
Ende: <input type="text" id="end"><br>
<div>
<select id="mode" onchange="calcRoute();">
  <option value="DRIVING">Auto</option>
  <option value="WALKING">zu Fuß</option>
</select><br>
<input type="button" value="Los" onclick="calcRoute();">
</div>
<br>

   <div style="width: 600px;">
     <div id="map" style="width: 400px; height: 400px; float: left;"></div> 
     <div id="panel" style="width: 400px; float: left;"></div> 
   </div>


   <script type="text/javascript"> 

     var directionsService = new google.maps.DirectionsService();
     var directionsDisplay = new google.maps.DirectionsRenderer();

     var map = new google.maps.Map(document.getElementById('map'), {
       zoom:7,
       mapTypeId: google.maps.MapTypeId.ROADMAP
     });

     directionsDisplay.setMap(map);
     directionsDisplay.setPanel(document.getElementById('panel'));

     var request = {
       origin: '', 
       destination: '',
       travelMode: google.maps.DirectionsTravelMode.DRIVING
     };

     directionsService.route(request, function(response, status) {
       if (status == google.maps.DirectionsStatus.OK) {
         directionsDisplay.setDirections(response);
       }
     });

     function calcRoute() {
  var selectedMode = document.getElementById("mode").value;
  var start = document.getElementById("start").value;
  var end = document.getElementById("end").value;
  var request = {
    origin:start,
    destination:end,
    travelMode: google.maps.TravelMode[selectedMode]
  };
  directionsService.route(request, function(result, status) {
    if (status == google.maps.DirectionsStatus.OK) {
      directionsDisplay.setDirections(result);
    }
  });
}
   </script> 
</body> 
</html>
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    See the below markup and code which takes input from textboxes and also the travelling mode from a dropdownbox-

    HTML-

    Start:<input type="text" id="start">
End:<input type="text" id="end">
<div>
<strong>Mode of Travel: </strong>
<select id="mode" onchange="calcRoute();">
  <option value="DRIVING">Driving</option>
  <option value="WALKING">Walking</option>
  <option value="BICYCLING">Bicycling</option>
  <option value="TRANSIT">Transit</option>
</select>
</div>

    Javascript-

    function calcRoute() {
  var selectedMode = document.getElementById("mode").value;
  var start = document.getElementById("start").value;
  var end = document.getElementById("end").value;
  var request = {
    origin:start,
    destination:end,
    travelMode: google.maps.TravelMode[selectedMode]
  };
  directionsService.route(request, function(result, status) {
    if (status == google.maps.DirectionsStatus.OK) {
      directionsDisplay.setDirections(result);
    }
  });
}
    • 0