To find the source, you have to use the class Autocomplete , and to have it available you have to have loaded google maps specifying that you also want the library places
<script src="https://maps.googleapis.com/maps/api/js?&v=3&libraries=places&key=<API KEY>"></script>
Since you know the destination , I assume you know its coordinates (lat and lng). Let's start by assuming that. We will also assume that you have a variable map
that represents the instance of your map.
var map = new google.maps.Map(....),
destino = new google.maps.LatLng(lat,lng);
Since you have the Autocomplete class , you have to instantiate it on a container element. For example:
var input = document.getElementById('input_buscador');
autocomplete = new google.maps.places.Autocomplete(input);
To the instance of the autocompleter you have to add a listener that detects when the person has entered an address:
google.maps.event.addListener(autocomplete, 'place_changed', function () {
var place = autocomplete.getPlace(),
origen = place.geometry.location;
});
By now you know the origin and destination, so you can use the example in DirectionsService
var directionsService = new google.maps.DirectionsService(),
directionsDisplay = new google.maps.DirectionsRenderer();
directionsDisplay.setMap(map);
directionsService.route({
origin: origen
destination: destino
travelMode: 'DRIVING'
}, function(response, status) {
if (status === 'OK') {
directionsDisplay.setDirections(response);
} else {
window.alert('Directions request failed due to ' + status);
}
});
I leave you the task of putting everything together and passing the variables from one side to the other. For example, building a function that expects as input the origin and destination;