the below codes works fine it has one logical error
on txtfrom when select any address and then press tab to go on txtto textbox the value in txtfrom become null again it should retain the value selected by user
<script type="text/javascript">
var isPlaceChanged = false;
$(function () {
var textbox1 = $(this).find('[id*=txtfrom]');
var textbox2 = $(this).find('[id*=txtto]');
ApplyAutoComplete(textbox1);
ApplyAutoComplete(textbox2);
});
function ApplyAutoComplete(input) {
google.maps.event.addDomListener(window, 'load', function () {
var places;
for (var i = 0; i < input.length; i++) {
var options = { types: ['(regions)'] };
places = new google.maps.places.Autocomplete(input[i], options);
}
google.maps.event.addListener(places, 'place_changed', function () {
isPlaceChanged = true;
var place = places.getPlace();
var address = place.formatted_address;
var mesg = "Address: " + address;
});
});
}
var source, destination;
var directionsDisplay;
var directionsService = new google.maps.DirectionsService();
function initialize(textBox) {
var input = textBox;
var options = {
types: ['(regions)']
// Uncomment if restrict for Country.
//, componentRestrictions: { country: 'in' }
};
var autocomplete = new google.maps.places.Autocomplete(input, options);
}
google.maps.event.addDomListener(window, 'load', function () {
initialize(document.getElementById('<%=txtfrom.ClientID%>'));
initialize(document.getElementById('<%=txtto.ClientID%>'));
directionsDisplay = new google.maps.DirectionsRenderer({ 'draggable': true });
})
//----------------- orgin google api selection validation start-----------------
$(function () {
$('#<%= txtfrom.ClientID %>').keydown(function () {
isPlaceChanged = false;
});
$('#<%= txtfrom.ClientID %>').blur(function () {
if (!isPlaceChanged) {
//alert(isPlaceChanged);
var valName = document.getElementById("<%=RequiredFieldValidator3.ClientID%>");
ValidatorEnable(valName, $('#<%= txtfrom.ClientID %>').val(''));
}
else {
//alert(isPlaceChanged);
var valName = document.getElementById("<%=RequiredFieldValidator3.ClientID%>");
ValidatorEnable(valName, $('#<%= txtfrom.ClientID %>').val(''));
}
});
});
//----------------- orgin google api selection validation end-----------------
//----------------- destination google api selection validation start-----------------
$(function () {
$('#<%= txtto.ClientID %>').keydown(function () {
isPlaceChanged = false;
});
$('#<%= txtto.ClientID %>').blur(function () {
if (!isPlaceChanged) {
var valName = document.getElementById("<%=RequiredFieldValidator4.ClientID%>");
ValidatorEnable(valName, $('#<%= txtto.ClientID %>').val(''));
//alert("Please Enter valid location");
}
else {
var valName = document.getElementById("<%=RequiredFieldValidator4.ClientID%>");
ValidatorEnable(valName, $('#<%= txtto.ClientID %>').val(''));
}
});
});
//----------------- destination google api selection validation end-----------------
</script>
<div class="form-group col-md-2 padding2"> Origin ( City,ST )
<asp:TextBox ID="txtfrom" runat="server" ></asp:TextBox>
<asp:Label ID="Label6" runat="server" Text="Origin is required" CssClass="validation" Visible="false"></asp:Label>
<asp:RequiredFieldValidator ID="RequiredFieldValidator3" runat="server" ErrorMessage="Select Origin from address list" CssClass="validation" ControlToValidate="txtfrom" Display="Dynamic" ValidationGroup="pl"></asp:RequiredFieldValidator>
</div>
<div class="form-group col-md-2 padding2">Destination ( City,ST )
<asp:TextBox ID="txtto" runat="server" ></asp:TextBox>
<asp:Label ID="Llbldistance" runat="server" Text=""></asp:Label><br />
<asp:Label ID="Llblduration" runat="server" Text=""></asp:Label>
<asp:RequiredFieldValidator ID="RequiredFieldValidator4" runat="server" ErrorMessage="Select Destination from address list" CssClass="validation" ControlToValidate="txtto" Display="Dynamic" ValidationGroup="pl"></asp:RequiredFieldValidator>
</div>