RouteFinder/sample1_basic_trace_route.html at master · SEACodeCarrots/RouteFinder · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml">
  <head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
    <title>Google Maps JavaScript API Route Example</title>
    <script src="http://maps.google.com/maps/api/js" type="text/javascript"></script>
    <script type="text/javascript">

    var map = null;
    var directions = null;

    function initialize() {
      // Default the map view to the continental U.S.
      var mapOptions = {
        center: new google.maps.LatLng(37.09024, -95.712891),
        mapTypeId: google.maps.MapTypeId.ROADMAP,
        zoom: 4
      };

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

      directionService = new google.maps.DirectionsService();
      directionsRenderer = new google.maps.DirectionsRenderer({ map: map });
    }

    function route() {
      var request = {
        origin: document.getElementById("from").value,
        destination: document.getElementById("to").value,
        travelMode: google.maps.DirectionsTravelMode.DRIVING
      }

      // Make the directions request
      directionService.route(request, function(result, status) {
        if (status == google.maps.DirectionsStatus.OK) {
          directionsRenderer.setDirections(result);

          // Trace the path.
          var path = result.routes[0].overview_path;
        } else {
          alert("Directions query failed: " + status);
        }
      });
    }
  </script>
  <style>
    #map {
      border: 1px solid black;
    }
  </style>
  </head>

  <body onload="initialize();">
    <div id="map" style="width: 800px; height: 600px;"></div>
    From <input type="text" id="from" value="denver"/>
    to <input type="text" id="to" value="dallas"/>
    <input type="submit" onclick="route()"/>
  </body>
</html>