I am working on the web app in Which I need to add pickup address, drop-off address and a array of visit area through which user will move between pickup and drop-off address. What I have done is route the map and calculate the distance between pickup and dropoff address, but I am unable to match the visit areas with pickup and drop-off.
Here is my code, If I anyone can give me an idea how to do this:

**web Form**

```
<form class="uk-form" name="myForm" id="myForm">
<input id="pickup" class="controls" name="pickup" type="text"/>
<input id="dropoff" class="controls" name="dropoff" type="text"/>
<input id="visitarea" class="controls" name="visitarea" type="text"/>    
<input id="calculatefare" class="calculatefare" type="button" value="Calculate Fare" />
</form>

```

**Javascript Function**

```
function initAutocomplete() {

var origin_place_id = null;
var destination_place_id = null;
var visitarea_place_id = null;

var travel_mode = google.maps.TravelMode.DRIVING;

var map = new google.maps.Map(document.getElementById('map-canvas'), {
  mapTypeControl: false,
  center: {lat: 30.3753, lng: 69.3451},
  zoom: 7,
  scrollwheel: false,
    navigationControl: false,
    mapTypeControl: false,
    scaleControl: false
});

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

var pickup = document.getElementById('pickup');
var dropoff = document.getElementById('dropoff');
var visitarea = document.getElementById('visitarea');

var options = {
componentRestrictions: {country: 'pk'}//Pakistan only
};

var origin_autocomplete = new google.maps.places.Autocomplete(pickup,options);
origin_autocomplete.bindTo('bounds', map);

var destination_autocomplete = new google.maps.places.Autocomplete(dropoff,options);
destination_autocomplete.bindTo('bounds', map);

var destination_autocomplete = new google.maps.places.Autocomplete(visitarea,options);
destination_autocomplete.bindTo('bounds', map);

// Sets a listener on a radio button to change the filter type on Places
// Autocomplete.

function expandViewportToFitPlace(map, place) {
  if (place.geometry.viewport) {
    map.fitBounds(place.geometry.viewport);
  } else {
    map.setCenter(place.geometry.location);
    map.setZoom(17);
  }
}

origin_autocomplete.addListener('place_changed', function() {
  var place = origin_autocomplete.getPlace();
  if (!place.geometry) {
    window.alert("Autocomplete's returned place contains no geometry");
    return;
  }
  expandViewportToFitPlace(map, place);

  // If the place has a geometry, store its place ID and route if we have
  // the other place ID
  origin_place_id = place.place_id;
  route(origin_place_id, destination_place_id, visitarea_place_id, travel_mode,
        directionsService, directionsDisplay);
});

destination_autocomplete.addListener('place_changed', function() {
  var place = destination_autocomplete.getPlace();
  if (!place.geometry) {
    window.alert("Autocomplete's returned place contains no geometry");
    return;
  }
  expandViewportToFitPlace(map, place);

  // If the place has a geometry, store its place ID and route if we have
  // the other place ID
  destination_place_id = place.place_id;
  route(origin_place_id, destination_place_id, visitarea_place_id, travel_mode,
        directionsService, directionsDisplay);
});

visitarea_autocomplete.addListener('place_changed', function() {
  var place = visitarea_autocomplete.getPlace();
  if (!place.geometry) {
    window.alert("Autocomplete's returned place contains no geometry");
    return;
  }
  expandViewportToFitPlace(map, place);

  // If the place has a geometry, store its place ID and route if we have
  // the other place ID
  visitarea_place_id = place.place_id;
  route(origin_place_id, destination_place_id, visitarea_place_id, travel_mode,
        directionsService, directionsDisplay);
});

function route(origin_place_id, destination_place_id, visitarea_place_id, travel_mode,
               directionsService, directionsDisplay) {
  if (!origin_place_id || !destination_place_id) {
    return;
  }

  directionsService.route({
    origin: {'placeId': origin_place_id},
    destination: {'placeId': destination_place_id},
    visitarea: {'placeId': visitarea_place_id},
    optimizeWaypoints: true,
    travelMode: travel_mode
  }, function(response, status) {
    if (status === google.maps.DirectionsStatus.OK) {
      directionsDisplay.setDirections(response);
      var d = response.routes[0].legs[0].distance.text;
        document.getElementById('km').value = d;

    } else {
      window.alert('Directions request failed due to ' + status);
    }
  });
}

 }

```

This code is not working due to the visit areas input field in web form and all other related stuff in javascript function but if I remove all the visit area related stuff, the pick and drop-off address working fine and the give me the required output.

Any help in this ?