Maps API v3 Directions simple

Simple use of the Directions service

by Alex Azuero

HTML

<script src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>
<div id="map-canvas"></div>

CSS

#map-canvas {
  height: 400px;
}

JavaScript

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

function initialize() {
  directionsDisplay = new google.maps.DirectionsRenderer();
  var center = new google.maps.LatLng(0, 0);
  var myOptions = {
    zoom: 7,
    mapTypeId: google.maps.MapTypeId.ROADMAP,
    center: center
  }

  map = new google.maps.Map(document.getElementById("map-canvas"), myOptions);
  directionsDisplay.setMap(map);

  var start = "Pune";
  var end = "Mumbai";
  var method = 'DRIVING';
  var request = {
    origin: start,
    destination: end,
    travelMode: google.maps.DirectionsTravelMode[method]
  };

  directionsService.route(request, function(response, status) {
    if (status == google.maps.DirectionsStatus.OK) {
      var startLocation = response['routes'][0]['legs'][0]['start_location'];
      directionsDisplay.setDirections(response);

      var circleOptions = {
        strokeColor: '#ffff00',
        strokeWeight: 5,
        fillColor: '#0000dd',
        fillOpacity: 0.4,
        map: map,
        center: startLocation,
        radius: 10000
      };

      var circle = new google.maps.Circle(circleOptions);
    }
  });
}

initialize();