Google Maps API V3 : How show the route from point A to point B

The DirectionsService object calculates directions (using a variety of methods of transportation) and returns a route using the Google Maps API Directions Service which receives direction requests and returns computed results. Directions results can be displayed on the map by using the DirectionsRenderer. Official documentation: https://developers.google.com/maps/documentation/javascript/directions Stackoverflow question "Google Maps API V3 : How show the direction from a point A to point B" (http://stackoverflow.com/questions/5959788/google-maps-api-v3-how-show-the-direction-from-a-point-a-to-point-b-blue-line)

by deepak Singh

HTML

<script src="https://maps.googleapis.com/maps/api/js?sensor=false"></script>
<div id="map-canvas"></div>

CSS

html,
      body {
        height: 100%;
        margin: 0;
        padding: 0;
      }
      
      #map-canvas {
        height: 100%;
        width: 100%;
      }

JavaScript

//set your google maps parameters
var latitude = -36.33378,
  longitude = -72.25506,
  map_zoom = 11;

//google map custom marker icon - .png fallback for IE11
var is_internetExplorer11 = navigator.userAgent.toLowerCase().indexOf('trident') > -1;


//define the basic color of your map, plus a value for saturation and brightness
var main_color = '#2d313f',
  saturation_value = -20,
  brightness_value = 5;

//we define here the style of the map
var style = [{
    //set saturation for the labels on the map
    elementType: "labels",
    stylers: [{
      saturation: saturation_value
    }]
  }, { //poi stands for point of interest - don't show these lables on the map 
    featureType: "poi",
    elementType: "labels",
    stylers: [{
      visibility: "off"
    }]
  }, {
    //don't show highways lables on the map
    featureType: 'road.highway',
    elementType: 'labels',
    stylers: [{
      visibility: "off"
    }]
  }, {
    //don't show local road lables on the map
    featureType: "road.local",
    elementType: "labels.icon",
    stylers: [{
      visibility: "off"
    }]
  }, {
    //don't show arterial road lables on the map
    featureType: "road.arterial",
    elementType: "labels.icon",
    stylers: [{
      visibility: "off"
    }]
  }, {
    //don't show road lables on the map
    featureType: "road",
    elementType: "geometry.stroke",
    stylers: [{
      visibility: "off"
    }]
  },
  //style different elements on the map
  {
    featureType: "transit",
    elementType: "geometry.fill",
    stylers: [{
      hue: main_color
    }, {
      visibility: "on"
    }, {
      lightness: brightness_value
    }, {
      saturation: saturation_value
    }]
  }, {
    featureType: "poi",
    elementType: "geometry.fill",
    stylers: [{
      hue: main_color
    }, {
      visibility: "on"
    }, {
      lightness: brightness_value
    }, {
      saturation: saturation_value
    }]
  }, {
    featureType: "poi.government",
    elementType: "geometry.fill",
...