Google Maps API

Trying to integrate Google Maps API with Html

by Varun Krishna P

HTML

<title>Directions service</title>
 <script src="https://maps.googleapis.com/maps/api/js?v=3.exp&signed_in=true"></script>
<body>
    <div id="panel">
    <b>Start: </b>
    <select id="start" onchange="calcRoute();">
      <option value="chennai">Chennai</option>
      <option value="sowcarpet">sowcarpet</option>
      <option value="elephant gate">Elephant Gate</option>
      <option value="Spencer Plaza Mall">Spencer Plaza Mall</option>
      <option value="express avenue">Express Avenue</option>
      <option value="sathyam cinemas">sathyam cinemas</option>
      <option value="chennai central">Chennai central</option>
      <option value="Parry's Corner">Parry's Corner</option>
      <option value="Marina Beach">Marina Beach</option>
      <option value="Valluvar Kottam">Valluvar Kottam</option>
      <option value="Besant Nagar Beach">Besant Nagar Beach</option>
      <option value="Indian Institute of Technology Madras">Indian Institute of Technology Madras</option>
    </select>
    <b>End: </b>
    <select id="end" onchange="calcRoute();">
      <option value="chennai">Chennai</option>
      <option value="sowcarpet">sowcarpet</option>
      <option value="elephant gate">Elephant Gate</option>
      <option value="Spencer Plaza Mall">Spencer Plaza Mall</option>
      <option value="express avenue">Express Avenue</option>
      <option value="sathyam cinemas">sathyam cinemas</option>
      <option value="chennai central">Chennai central</option>
      <option value="Parry's Corner">Parry's Corner</option>
      <option value="Marina Beach">Marina Beach</option>
      <option value="Valluvar Kottam">Valluvar Kottam</option>
      <option value="Besant Nagar Beach">Besant Nagar Beach</option>
      <option value="Indian Institute of Technology Madras">Indian Institute of Technology Madras</option>
    </select>
    </div>
    <div id="map-canvas"></div>
  </body>

CSS

html, body, #map-canvas {
        height: 100%;
        margin: 0px;
        padding: 0px
      }
      #panel {
        position: absolute;
        top: 5px;
        left: 50%;
        margin-left: -180px;
        z-index: 5;
        background-color: #fff;
        padding: 5px;
        border: 1px solid #999;
      }

JavaScript

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

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

function calcRoute() {
  var start = document.getElementById('start').value;
  var end = document.getElementById('end').value;
  var request = {
      origin:start,
      destination:end,
      travelMode: google.maps.TravelMode.DRIVING
  };
  directionsService.route(request, function(response, status) {
    if (status == google.maps.DirectionsStatus.OK) {
      directionsDisplay.setDirections(response);
    }
  });
}

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