poguez/Maps_directions_dragabble-Puebla-Veracruz

## Maps_directions_dragabble-Puebla-Veracruz
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<meta charset="utf-8">
<title>Ejemplo de rutas Draggable</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 puebla = new google.maps.LatLng(19.039757,-98.206435);

function initialize() {

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

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

  calcRoute();
}

function calcRoute() {

  var request = {
origin: 'Puebla,PUE',
        destination: 'Veracruz, VER',
        waypoints:[{location: 'Tlaxcala, tlax'}, {location: 'Cordoba,VER'}],
        travelMode: google.maps.TravelMode.WALKING
  };
  directionsService.route(request, function(response, status) {
      if (status == google.maps.DirectionsStatus.OK) {
      directionsDisplay.setDirections(response);
      }
      });
}

function computeTotalDistance(result) {
  var total = 0;
  var myroute = result.routes[0];
  for (var i = 0; i < myroute.legs.length; i++) {
    total += myroute.legs[i].distance.value;
  }
  total = total / 1000.0;
  document.getElementById('total').innerHTML = total + ' km';
}

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

</script>
</head>
<body>
<div id="map-canvas" style="float:left;width:70%; height:100%"></div>
<div id="directionsPanel" style="float:right;width:30%;height 100%">
  <p>Total Distance: <span id="total"></span></p>
</div>
</body>
</html>>)}
	<!DOCTYPE html>
	<html>
	<head>
	<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
	<meta charset="utf-8">
	<title>Ejemplo de rutas Draggable</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 puebla = new google.maps.LatLng(19.039757,-98.206435);

	function initialize() {

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

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

	calcRoute();
	}

	function calcRoute() {

	var request = {
	origin: 'Puebla,PUE',
	destination: 'Veracruz, VER',
	waypoints:[{location: 'Tlaxcala, tlax'}, {location: 'Cordoba,VER'}],
	travelMode: google.maps.TravelMode.WALKING
	};
	directionsService.route(request, function(response, status) {
	if (status == google.maps.DirectionsStatus.OK) {
	directionsDisplay.setDirections(response);
	}
	});
	}

	function computeTotalDistance(result) {
	var total = 0;
	var myroute = result.routes[0];
	for (var i = 0; i < myroute.legs.length; i++) {
	total += myroute.legs[i].distance.value;
	}
	total = total / 1000.0;
	document.getElementById('total').innerHTML = total + ' km';
	}

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

	</script>
	</head>
	<body>
	<div id="map-canvas" style="float:left;width:70%; height:100%"></div>
	<div id="directionsPanel" style="float:right;width:30%;height 100%">
	<p>Total Distance: <span id="total"></span></p>
	</div>
	</body>
	</html>>)}