I have following code for the functionality in my site to calculate distance between a pickup address, a drop-off address and one waypoint (optional).
if ( Google_AutoComplete_Country != 'ALL_COUNTRIES' ) {
var options = {
componentRestrictions: {country: Google_AutoComplete_Country}
};
} else {
var options = '';
}
//if(form_tab == 'distance') {
/** Added by PG. */
//Condition to show return fields when return-journey is set to Return
$('#return-journey').change(function(){
if( $(this).val() === 'true' ) {
//Show return block
$('.return-block').css('display', 'block');
returnAdd = false;
returnVia = false;
//Return Address Autocomplete
var returnAdd_input = document.getElementById('return-address');
var returnAdd_autocomplete = new google.maps.places.Autocomplete(returnAdd_input,options);
google.maps.event.addListener(returnAdd_autocomplete, 'place_changed', function() {
var returnAdd_place = returnAdd_autocomplete.getPlace();
if (typeof returnAdd_place.adr_address === 'undefined') {
returnAdd = false;
} else {
returnAdd = true;
}
});
//Return Via Autocomplete
var returnVia_input = document.getElementById('return-via');
var returnVia_autocomplete = new google.maps.places.Autocomplete(returnVia_input,options);
google.maps.event.addListener(returnVia_autocomplete, 'place_changed', function() {
var returnVia_place = returnVia_autocomplete.getPlace();
if (typeof returnVia_place.adr_address === 'undefined') {
returnVia = false;
} else {
returnVia = true;
}
});
//Return Dropoff Autocomplete
var returnDropoff_input = document.getElementById('return-dropoff');
var returnDropoff_autocomplete = new google.maps.places.Autocomplete(returnDropoff_input, options);
google.maps.event.addListener(returnDropoff_autocomplete, 'place_changed', function() {
var returnDropoff_place = returnDropoff_autocomplete.getPlace();
if(typeof returnDropoff_place.adr_address === 'undefined'){
returnDropoff = false;
} else {
returnDropoff = true;
}
});
if(document.getElementById('atbReturnMap') !== null) {
var map = new google.maps.Map(document.getElementById('atbReturnMap'), {
mapTypeControl: false,
streetViewControl: false,
center: {lat: 53.0219186, lng: -2.2297829},
zoom: 8
});
var return_pickup_address_input = document.getElementById('return-address');
var return_dropoff_address_input = document.getElementById('return-dropoff');
var return_pickup_via_input = document.getElementById('return-via');
var return_route_distance_label = document.getElementById('display-return-route-distance');
var return_route_distance_string_input = document.getElementById('return-route-distance-string');
var return_route_distance_input = document.getElementById('return-route-distance');
var return_route_time_label = document.getElementById('display-return-route-time');
var return_route_time_input = document.getElementById('return-route-time');
new AutocompleteDirectionsHandler(map, return_pickup_address_input, return_dropoff_address_input, return_pickup_via_input, return_route_distance_label, return_route_distance_input, return_route_distance_string_input, return_route_time_label, return_route_time_input);
}
}
else {
$('.return-block').css('display', 'none');
returnAdd = undefined;
returnVia = undefined;
returnDropoff = undefined;
}
});
/** END - Added by PG. */
if(document.getElementById('atbMap') !== null) {
var map = new google.maps.Map(document.getElementById('atbMap'), {
mapTypeControl: false,
streetViewControl: false,
center: {lat: 53.0219186, lng: -2.2297829},
zoom: 8
});
console.log(document.getElementById('pickup-address1'));
var pickup_address_input = document.getElementById('pickup-address1');
var dropoff_address_input = document.getElementById('dropoff-address1');
var pickup_via_input = document.getElementById('pickup-via1');
var waypointsInput = newInput;
var first_route_distance_label = document.getElementById('display-route-distance');
var first_route_distance_string_input = document.getElementById('route-distance-string');
var first_route_distance_input = document.getElementById('route-distance');
var first_route_time_label = document.getElementById('display-route-time');
var first_route_time_input = document.getElementById('route-time');
new AutocompleteDirectionsHandler( map, pickup_address_input, dropoff_address_input, pickup_via_input, first_route_distance_label, first_route_distance_input, first_route_distance_string_input, first_route_time_label, first_route_time_input, waypointsInput);
}
//}
/** Start */
/**
* @constructor
*/
function AutocompleteDirectionsHandler(map, originInput, destinationInput, waypointInput, routeDisplayElement, routeInputElement, routeInputStringElement, timeDisplayElement, timeInputElement,waypointsInput) {
this.map = map;
this.routeDisplayElement = routeDisplayElement;
this.routeInputElement = routeInputElement;
this.routeInputStringElement = routeInputStringElement;
this.timeDisplayElement = timeDisplayElement;
this.timeInputElement = timeInputElement;
this.originPlaceId = null;
this.destinationPlaceId = null;
this.waypointPlaceId = [];
this.travelMode = 'DRIVING';
var originInput = originInput;
var destinationInput = destinationInput;
var waypointInput = waypointInput;
var waypointsInput = waypointsInput;
this.directionsService = new google.maps.DirectionsService;
this.directionsDisplay = new google.maps.DirectionsRenderer;
this.directionsDisplay.setMap(map);
var originAutocomplete = new google.maps.places.Autocomplete(
originInput, options);
var destinationAutocomplete = new google.maps.places.Autocomplete(
destinationInput, options);
var waypointAutocomplete = new google.maps.places.Autocomplete(
waypointInput, options);
// waypointAutocomplete = [];
this.setupPlaceChangedListener = function(autocomplete, mode) {
var me = this;
autocomplete.bindTo('bounds', this.map);
autocomplete.addListener('place_changed', function() {
var place = autocomplete.getPlace();
function checkPlaceAddress(adr){
if ( typeof adr === 'undefined') {
window.alert("Please select an option from the dropdown list.");
return false;
} else {
return true;
}
}
switch(mode){
case 'ORIG':
pickup_1 = checkPlaceAddress(place.adr_address);
if(pickup_1) me.originPlaceId = place.place_id;
$('#pickup-address-lat').val(place.geometry.location.lat());
$('#pickup-address-lng').val(place.geometry.location.lng());
break;
case 'DEST':
dropoff_1 = checkPlaceAddress(place.adr_address);
if(dropoff_1) me.destinationPlaceId = place.place_id;
$('#dropoff-address-lat').val(place.geometry.location.lat());
$('#dropoff-address-lng').val(place.geometry.location.lng());
break;
case 'WAYPT':
pickupVia = checkPlaceAddress(place.adr_address);
if(pickupVia) me.waypointPlaceId = { location: place.formatted_address, stopover: true };
$('#pickup-via-lat').val(place.geometry.location.lat());
$('#pickup-via-lng').val(place.geometry.location.lng());
break;
}
me.route();
});
};
this.setupPlaceChangedListener(originAutocomplete, 'ORIG');
this.setupPlaceChangedListener(destinationAutocomplete, 'DEST');
this.setupPlaceChangedListener(waypointAutocomplete, 'WAYPT');
//this.setupPlaceChangedListener(WptPlace[0], 'WAYPT');
}
AutocompleteDirectionsHandler.prototype.route = function() {
if (!this.originPlaceId || !this.destinationPlaceId) {
return;
}
var me = this;
var directions = {
origin: {'placeId': me.originPlaceId},
destination: {'placeId': me.destinationPlaceId},
travelMode: me.travelMode
};
if(me.waypointPlaceId != undefined) {
directions.waypoints = [me.waypointPlaceId]
}
me.directionsService.route(directions, function(response, status) {
if (status === 'OK') {
me.directionsDisplay.setDirections(response);
//console.log(me.directionsDisplay.getDirections());
computeTotalDistance(me.directionsDisplay.getDirections(), me.routeDisplayElement, me.routeInputElement, me.routeInputStringElement, me.timeDisplayElement, me.timeInputElement);
} else {
window.alert('Directions request failed due to ' + status);
}
});
};
the relevant HTML code is as follows:
<form class="booking-form-1 one-way-transfer-form">
<input type="text" name="pickup-address" id="pickup-address1" class="pickup-address" placeholder="' . esc_html__( 'Pick Up Address', 'chauffeur' ) . '" />
<div class="pickup-via-input">
<div class="via_wrapper" id="via_wrapper">
<div>
<input type="text" id="pickup-via1" class="pickup-via" placeholder="' . esc_html__( 'Pickup Via Address', 'chauffeur' ) . '" />
<a href="javascript:void(0);" class="add_button" title="Add field"><img src="'. get_stylesheet_directory_uri() .'/images/add-icon.png"/></a>
</div>
</div>
</div>
<input type="text" name="dropoff-address" id="dropoff-address1" class="dropoff-address" placeholder="' . esc_html__( 'Drop Off Address', 'chauffeur' ) . '" />
<input type="checkbox" id="waypoint-check" class="waypoint-check" /> <span style="color:#fff">Add Waypoint</span>
<div class="clear"></div>
<div class="route-content">
<div id="display-route-distance" class="left-col-distance"></div>
<div id="display-route-time" class="right-col-time"></div>
</div>
<div class="clear"></div>
<input type="hidden" name="route-distance-string" id="route-distance-string" />
<input type="hidden" name="route-distance" id="route-distance" />
<input type="hidden" name="route-time" id="route-time" />
<div id="atbMap"></div>
<input type="hidden" name="pickup-address-lat" id="pickup-address-lat" />
<input type="hidden" name="pickup-address-lng" id="pickup-address-lng" />
<input type="hidden" name="pickup-via-lat" id="pickup-via-lat" />
<input type="hidden" name="pickup-via-lng" id="pickup-via-lng" />
<input type="hidden" name="dropoff-address-lat" id="dropoff-address-lat" />
<input type="hidden" name="dropoff-address-lng" id="dropoff-address-lng" />
Now I want to add the feature of adding multiple waypoint inputs using +, - button.
how do I set up the place changed listener everytime the new waypoint is added, so that it calculates all the previous waypoints also if any.
Here is the coded that I've added for multiple waypoints and adding autocomplete in it.
$('.add_button').click(function(){
pickupViaCount++;
//console.log(pickupViaCount);
var fieldHTML = '<div><input type="text" id="pickup-via'+ pickupViaCount +'" class="pickup-via" placeholder="Pickup Via Address" /><a href="javascript:void(0);" class="remove_button"><img src="' + path_vars.image_dir_path + '/remove-icon.png"/></a></div>';
$('.via_wrapper').append(fieldHTML);
var newEl = document.getElementById('pickup-via' + pickupViaCount);
var placee2 = new google.maps.places.Autocomplete(newEl, options);
newInput.push(newEl);
