romuloceccon/maps.html

## maps.html
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
    <style type="text/css">
      html { height: 100% }
      body { height: 100%; margin: 0; padding: 0 }
      #map_canvas { height: 100% }
    </style>
    <script type="text/javascript"
      src="http://maps.googleapis.com/maps/api/js?key=AIzaSyDflN5fMc6kgt5C1vSt8Durt1zNFp2IGN0&sensor=false">
    </script>
    <script type="text/javascript">
      var rendererOptions = {
        draggable: false,
        preserveViewport: true
      };
      var directionsDisplay = new google.maps.DirectionsRenderer(rendererOptions);;
      var directionsService = new google.maps.DirectionsService();

      var map;
      var origin = null;
      var destination = null;
      var waypoints = [];

      function initialize() {
        var mapOptions = {
          center: new google.maps.LatLng(-34.397, 150.644),
          zoom: 8,
          mapTypeId: google.maps.MapTypeId.ROADMAP
        };

        map = new google.maps.Map(document.getElementById("map_canvas"),
            mapOptions);
        directionsDisplay.setMap(map);

        google.maps.event.addListener(map, 'click', function(event) {
          placeMarker(event.latLng);
        });
      }

      function placeMarker(location) {
        var marker = new google.maps.Marker({
            position: location,
            map: map
        });

        if (origin == null)
          origin = location;
        else if (destination == null)
          destination = location;
        else
        {
          waypoints.push({ location: destination });
          destination = location;
        }

        if (origin != null && destination != null)
        {
          var request = {
            origin: origin,
            destination: destination,
            waypoints: waypoints,
            optimizeWaypoints: true,
            travelMode: google.maps.TravelMode.DRIVING
          };
          directionsService.route(request, function(response, status) {
            if (status == google.maps.DirectionsStatus.OK)
              directionsDisplay.setDirections(response);
              var s = "";
              for (i = 0; i < response.routes[0].overview_path.length; i++)
                s += response.routes[0].overview_path[i].toString() + "<br />";
              document.getElementById("coordinates").innerHTML = s;
          });
        }
      }

      google.maps.event.addDomListener(window, 'load', initialize);
    </script>
  </head>
  <body>
    <div id="map_canvas" style="float: left; width: 70%; height: 100%;"></div>
    <div id="coordinates" style="float: right; width: 30%; height: 100%;"></div>
  </body>
</html>
	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="utf-8" />
	<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
	<style type="text/css">
	html { height: 100% }
	body { height: 100%; margin: 0; padding: 0 }
	#map_canvas { height: 100% }
	</style>
	<script type="text/javascript"
	src="http://maps.googleapis.com/maps/api/js?key=AIzaSyDflN5fMc6kgt5C1vSt8Durt1zNFp2IGN0&sensor=false">
	</script>
	<script type="text/javascript">
	var rendererOptions = {
	draggable: false,
	preserveViewport: true
	};
	var directionsDisplay = new google.maps.DirectionsRenderer(rendererOptions);;
	var directionsService = new google.maps.DirectionsService();

	var map;
	var origin = null;
	var destination = null;
	var waypoints = [];

	function initialize() {
	var mapOptions = {
	center: new google.maps.LatLng(-34.397, 150.644),
	zoom: 8,
	mapTypeId: google.maps.MapTypeId.ROADMAP
	};

	map = new google.maps.Map(document.getElementById("map_canvas"),
	mapOptions);
	directionsDisplay.setMap(map);

	google.maps.event.addListener(map, 'click', function(event) {
	placeMarker(event.latLng);
	});
	}

	function placeMarker(location) {
	var marker = new google.maps.Marker({
	position: location,
	map: map
	});

	if (origin == null)
	origin = location;
	else if (destination == null)
	destination = location;
	else
	{
	waypoints.push({ location: destination });
	destination = location;
	}

	if (origin != null && destination != null)
	{
	var request = {
	origin: origin,
	destination: destination,
	waypoints: waypoints,
	optimizeWaypoints: true,
	travelMode: google.maps.TravelMode.DRIVING
	};
	directionsService.route(request, function(response, status) {
	if (status == google.maps.DirectionsStatus.OK)
	directionsDisplay.setDirections(response);
	var s = "";
	for (i = 0; i < response.routes[0].overview_path.length; i++)
	s += response.routes[0].overview_path[i].toString() + "<br />";
	document.getElementById("coordinates").innerHTML = s;
	});
	}
	}

	google.maps.event.addDomListener(window, 'load', initialize);
	</script>
	</head>
	<body>
	<div id="map_canvas" style="float: left; width: 70%; height: 100%;"></div>
	<div id="coordinates" style="float: right; width: 30%; height: 100%;"></div>
	</body>
	</html>