rmihalyi/testDragRoute

## testDragRoute
<!DOCTYPE html>
<html>
  <head>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
    <meta charset="utf-8">
    <title>Draggable directions</title>
    <style>
      html, body, #map-canvas {
        height: 100%;
        margin: 0px;
        padding: 0px
      }
    </style>
    <script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script>
    <script>

var rendererOptions = {
  draggable: true
};
var directionsDisplay = new google.maps.DirectionsRenderer(rendererOptions);;
var directionsService = new google.maps.DirectionsService();
var map;
var stepDisplay;
var markerArray = [];

var australia = new google.maps.LatLng(-25.274398, 133.775136);

function initialize() {

  var mapOptions = {
    zoom: 7,
    center: australia
  };
  map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
  directionsDisplay.setMap(map);

  google.maps.event.addListener(directionsDisplay, 'directions_changed', function() {
    recalculateMarkers();
  });

  calcRoute();
}

function calcRoute() {

  var request = {
    origin: 'Sydney, NSW',
    destination: 'Broken Hill, NSW',
    travelMode: google.maps.TravelMode.DRIVING
  };
  directionsService.route(request, function(response, status) {
    if (status == google.maps.DirectionsStatus.OK) {
      directionsDisplay.setDirections(response);
      showSteps(response);
    }
  });
}

function recalculateMarkers() {
  // First, remove any existing markers from the map.
  for (var i = 0; i < markerArray.length; i++) {
    markerArray[i].setMap(null);
  }
  // Now, clear the array itself.
  markerArray = [];
  // Show new markers
  showSteps(directionsDisplay.directions);
}

function showSteps(directionResult) {
  // For each step, place a marker, and add the text to the marker's
  // info window. Also attach the marker to an array so we
  // can keep track of it and remove it when calculating new
  // routes.
  debugger;
  var myRoute = directionResult.routes[0].legs[0];
  for (var i = 0; i < myRoute.steps.length; i++) {
    var marker = new google.maps.Marker({
      position: myRoute.steps[i].start_location,
      map: map
    });
    attachInstructionText(marker, myRoute.steps[i].instructions);
    markerArray[i] = marker;
  }
}

function attachInstructionText(marker, text) {
  google.maps.event.addListener(marker, 'click', function() {
    // Open an info window when the marker is clicked on,
    // containing the text of the step.
    stepDisplay.setContent(text);
    stepDisplay.open(map, marker);
  });
}

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

    </script>
  </head>
  <body>
    <div id="map-canvas" style="float:left;width:100%; height:100%"></div>
  </body>
</html>
	<!DOCTYPE html>
	<html>
	<head>
	<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
	<meta charset="utf-8">
	<title>Draggable directions</title>
	<style>
	html, body, #map-canvas {
	height: 100%;
	margin: 0px;
	padding: 0px
	}
	</style>
	<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script>
	<script>

	var rendererOptions = {
	draggable: true
	};
	var directionsDisplay = new google.maps.DirectionsRenderer(rendererOptions);;
	var directionsService = new google.maps.DirectionsService();
	var map;
	var stepDisplay;
	var markerArray = [];

	var australia = new google.maps.LatLng(-25.274398, 133.775136);

	function initialize() {

	var mapOptions = {
	zoom: 7,
	center: australia
	};
	map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
	directionsDisplay.setMap(map);

	google.maps.event.addListener(directionsDisplay, 'directions_changed', function() {
	recalculateMarkers();
	});

	calcRoute();
	}

	function calcRoute() {

	var request = {
	origin: 'Sydney, NSW',
	destination: 'Broken Hill, NSW',
	travelMode: google.maps.TravelMode.DRIVING
	};
	directionsService.route(request, function(response, status) {
	if (status == google.maps.DirectionsStatus.OK) {
	directionsDisplay.setDirections(response);
	showSteps(response);
	}
	});
	}

	function recalculateMarkers() {
	// First, remove any existing markers from the map.
	for (var i = 0; i < markerArray.length; i++) {
	markerArray[i].setMap(null);
	}
	// Now, clear the array itself.
	markerArray = [];
	// Show new markers
	showSteps(directionsDisplay.directions);
	}

	function showSteps(directionResult) {
	// For each step, place a marker, and add the text to the marker's
	// info window. Also attach the marker to an array so we
	// can keep track of it and remove it when calculating new
	// routes.
	debugger;
	var myRoute = directionResult.routes[0].legs[0];
	for (var i = 0; i < myRoute.steps.length; i++) {
	var marker = new google.maps.Marker({
	position: myRoute.steps[i].start_location,
	map: map
	});
	attachInstructionText(marker, myRoute.steps[i].instructions);
	markerArray[i] = marker;
	}
	}

	function attachInstructionText(marker, text) {
	google.maps.event.addListener(marker, 'click', function() {
	// Open an info window when the marker is clicked on,
	// containing the text of the step.
	stepDisplay.setContent(text);
	stepDisplay.open(map, marker);
	});
	}

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

	</script>
	</head>
	<body>
	<div id="map-canvas" style="float:left;width:100%; height:100%"></div>
	</body>
	</html>