JS:
function initMap() {
var pointA = new google.maps.LatLng(51.7519, -1.2578),
    pointB = new google.maps.LatLng(50.8429, -0.1313),
    pointC = new google.maps.LatLng(51.2029, -0.1403),
    myOptions = {
        zoom: 7,
        center: pointA
    },
    map = new google.maps.Map(document.getElementById('map-canvas'), myOptions),
    // Instantiate a directions service.
    directionsService = new google.maps.DirectionsService,
    directionsDisplay = new google.maps.DirectionsRenderer({
        map: map
    }),
    markerA = new google.maps.Marker({
        position: pointA,
        title: "point A",
        label: "A",
        map: map
    }),
    markerB = new google.maps.Marker({
        position: pointB,
        title: "point B",
        label: "B",
        map: map
    }),
        markerC = new google.maps.Marker({
        position: pointC,
        title: "point C",
        label: "C",
        map: map
    });
var circle = new google.maps.Circle({
map: map,
radius: 1000,    // 10 miles in metres
fillColor: '#AA0000'
 });

circle.bindTo('center', markerC, 'position');
// get route from A to B
calculateAndDisplayRoute(directionsService, directionsDisplay, pointA, pointB);

 }

 function calculateAndDisplayRoute(directionsService, directionsDisplay, pointA, pointB) {
directionsService.route({
    origin: pointA,
    destination: pointB,
    avoidTolls: true,
    avoidHighways: false,
    travelMode: google.maps.TravelMode.DRIVING
}, function (response, status) {
    if (status == google.maps.DirectionsStatus.OK) {
        directionsDisplay.setDirections(response);
    } else {
        window.alert('Directions request failed due to ' + status);
    }
});
 }

 initMap();

<div id="map-canvas"></div>

html, body {
      height: 100%;
      margin: 0;
      padding: 0;
  }
  #map-canvas {
      height: 100%;
      width: 100%;
  }