wallyqs/abroute.js

## abroute.js
  function initialize() {

 var omotesandoLatLng = new google.maps.LatLng(35.66508, 139.71248); // Omotesando

  var mapOptions = {
    center: omotesandoLatLng,
    zoom: 15,
    styles: [
      {
        stylers: [
          { hue: "#cafe12" },
          { saturation: -20 }
        ]
      },{
        featureType: "road",
        elementType: "geometry",
        stylers: [
          { lightness: 10 },
          { visibility: "simplified" }
        ]
      },{
        featureType: "road",
        elementType: "labels",
        stylers: [
          { visibility: "off" }
        ]
      }
    ]
  };

  var map = new google.maps.Map(document.getElementById("map-canvas"),
                                mapOptions);
  // Directions!!!
  var directionsDisplay = new google.maps.DirectionsRenderer({ dragable: true });
  var directionsService = new google.maps.DirectionsService();
  directionsDisplay.setMap(map);

  // To add the marker to the map, use the 'map' property
  window.pointA = omotesandoLatLng;
  var marker = new google.maps.Marker({
    position: window.pointA,
    map: map,
    title:"Point A",
    draggable: true,
    // icon: new google.maps.Symbol({
    //   fillColor: "#cafe12"
    // })
  });
  window.markerA = marker;

  // Make it possible to set the next marker
  google.maps.event.addListener(map, 'click', function(event) {
    if (window.markerB) {
      window.markerB.setMap(null);
    }

    window.pointB = event.latLng;
    var marker = new google.maps.Marker({
      position: window.pointB,
      title: "Point B",
      map: map
    });

    window.markerB = marker;

    var request = {
      origin: pointA,
      destination: pointB,
      travelMode: google.maps.TravelMode.DRIVING
    };

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


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


## index.html
  <!DOCTYPE html>
  <html>
    <head>
      <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
      <link rel="stylesheet" href="./main.css" type="text/css" media="screen" />
      <script type="text/javascript"
              src="https://maps.googleapis.com/maps/api/js?key=<%= @api_key %>&sensor=false">
      </script>
      <script type="text/javascript" src="./script.js"></script>
    </head>
    <body>
      <h1>Route selection</h1>

      <h2>How to use</h2>
      Point A: Needs to be dragged <br />
      Point B: Click around to set it
      <br /><br />
      <!-- Position of point A: <span id="latlngOfpointA" value="" /><br /> -->
      <!-- Position of point B: <span id="latlngOfpointB" value="" /> -->
      <div id="map-canvas"/>
    </body>
  </html>
	function initialize() {

	var omotesandoLatLng = new google.maps.LatLng(35.66508, 139.71248); // Omotesando

	var mapOptions = {
	center: omotesandoLatLng,
	zoom: 15,
	styles: [
	{
	stylers: [
	{ hue: "#cafe12" },
	{ saturation: -20 }
	]
	},{
	featureType: "road",
	elementType: "geometry",
	stylers: [
	{ lightness: 10 },
	{ visibility: "simplified" }
	]
	},{
	featureType: "road",
	elementType: "labels",
	stylers: [
	{ visibility: "off" }
	]
	}
	]
	};

	var map = new google.maps.Map(document.getElementById("map-canvas"),
	mapOptions);
	// Directions!!!
	var directionsDisplay = new google.maps.DirectionsRenderer({ dragable: true });
	var directionsService = new google.maps.DirectionsService();
	directionsDisplay.setMap(map);

	// To add the marker to the map, use the 'map' property
	window.pointA = omotesandoLatLng;
	var marker = new google.maps.Marker({
	position: window.pointA,
	map: map,
	title:"Point A",
	draggable: true,
	// icon: new google.maps.Symbol({
	// fillColor: "#cafe12"
	// })
	});
	window.markerA = marker;

	// Make it possible to set the next marker
	google.maps.event.addListener(map, 'click', function(event) {
	if (window.markerB) {
	window.markerB.setMap(null);
	}

	window.pointB = event.latLng;
	var marker = new google.maps.Marker({
	position: window.pointB,
	title: "Point B",
	map: map
	});

	window.markerB = marker;

	var request = {
	origin: pointA,
	destination: pointB,
	travelMode: google.maps.TravelMode.DRIVING
	};

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


	google.maps.event.addDomListener(window, 'load', initialize);
	<!DOCTYPE html>
	<html>
	<head>
	<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
	<link rel="stylesheet" href="./main.css" type="text/css" media="screen" />
	<script type="text/javascript"
	src="https://maps.googleapis.com/maps/api/js?key=<%= @api_key %>&sensor=false">
	</script>
	<script type="text/javascript" src="./script.js"></script>
	</head>
	<body>
	<h1>Route selection</h1>

	<h2>How to use</h2>
	Point A: Needs to be dragged <br />
	Point B: Click around to set it
	<br /><br />
	<!-- Position of point A: <span id="latlngOfpointA" value="" /><br /> -->
	<!-- Position of point B: <span id="latlngOfpointB" value="" /> -->
	<div id="map-canvas"/>
	</body>
	</html>