google map direction html

by justicechan

HTML

<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&signed_in=true"></script>
<div id="panel"> <b>Start: </b>

    <select id="start" onchange="calcRoute();">
        <option value="chicago, il">Chicago</option>
        <option value="st louis, mo">St Louis</option>
        <option value="joplin, mo">Joplin, MO</option>
        <option value="oklahoma city, ok">Oklahoma City</option>
        <option value="amarillo, tx">Amarillo</option>
        <option value="gallup, nm">Gallup, NM</option>
        <option value="flagstaff, az">Flagstaff, AZ</option>
        <option value="winona, az">Winona</option>
        <option value="kingman, az">Kingman</option>
        <option value="barstow, ca">Barstow</option>
        <option value="san bernardino, ca">San Bernardino</option>
        <option value="los angeles, ca">Los Angeles</option>
    </select> <b>End: </b>

    <select id="end" onchange="calcRoute();">
        <option value="chicago, il">Chicago</option>
        <option value="st louis, mo">St Louis</option>
        <option value="joplin, mo">Joplin, MO</option>
        <option value="oklahoma city, ok">Oklahoma City</option>
        <option value="amarillo, tx">Amarillo</option>
        <option value="gallup, nm">Gallup, NM</option>
        <option value="flagstaff, az">Flagstaff, AZ</option>
        <option value="winona, az">Winona</option>
        <option value="kingman, az">Kingman</option>
        <option value="barstow, ca">Barstow</option>
        <option value="san bernardino, ca">San Bernardino</option>
        <option value="los angeles, ca">Los Angeles</option>
    </select>
</div>
<div id="map-canvas"></div>
<div id="result"></div>

CSS

html, body {
          height: 100%;
          margin: 0;
          padding: 0;
      }
      #map-canvas {
          height: 60%;
          margin: 0;
          padding: 0;
      }
      #panel {
          position: absolute;
          top: 5px;
          left: 50%;
          margin-left: -180px;
          z-index: 5;
          background-color: #fff;
          padding: 5px;
          border: 1px solid #999;
      }
      /*
      Provide the following styles for both ID and class,
      where ID represents an actual existing "panel" with
      JS bound to its name, and the class is just non-map
      content that may already have a different ID with
      JS bound to its name.
      */
      #panel, .panel {
          font-family:'Roboto', 'sans-serif';
          line-height: 30px;
          padding-left: 10px;
      }
      #panel select, #panel input, .panel select, .panel input {
          font-size: 15px;
      }
      #panel select, .panel select {
          width: 100%;
      }
      #panel i, .panel i {
          font-size: 12px;
      }

JavaScript

var directionsDisplay;
var directionsService = new google.maps.DirectionsService();
var map;

function initialize() {
    directionsDisplay = new google.maps.DirectionsRenderer();
    var chicago = new google.maps.LatLng(22.309442, 113.918567);
    var mapOptions = {
        zoom: 7,
        center: chicago
    };
    map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
    directionsDisplay.setMap(map);
}

function calcRoute() {
    var start = 'Airport - Terminal 1, Chek Lap Kok';
    var end = 'Regal Kowloon Hotel, 71 Mody Rd, Tsim Sha Tsui East';
    var request = {
        origin: start,
        destination: end,
        travelMode: google.maps.TravelMode.TRANSIT
    };
    directionsService.route(request, function (response, status) {
        if (status == google.maps.DirectionsStatus.OK) {
            var result = document.getElementById('result');
            result.innerHTML= "";
            for (var i =0; i < response.routes[0].legs[0].steps.length; i++){
                result.innerHTML+=response.routes[0].legs[0].steps[i]+"<br>"
            }
            console.log(response)
            directionsDisplay.setDirections(response);
        }
    });
}

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