hello,
i am using this code i need to get longitude and latitude on textbox change event after selection of address
i want to retain origin latitude and longitude as well destination latitude and longitude in labels
<script type="text/javascript">
var fromAddress;
var toAddress;
$(function () {
var textbox1 = $(this).find('[id*=txtfrom]');
var textbox2 = $(this).find('[id*=txtto]');
ApplyAutoComplete(textbox1);
ApplyAutoComplete(textbox2);
$(textbox1).blur(function () {
var address = $(this).val();
if (address == fromAddress) {
$('[id*=lblFrom]').hide();
} else {
$('[id*=lblFrom]').show();
}
});
$(textbox2).blur(function () {
var address = $(this).val();
if (address == toAddress) {
$('[id*=lblTo]').hide();
} else {
$('[id*=lblTo]').show();
}
});
});
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 () {
if ($(input)[0].id == $('#<%=txtfrom.ClientID%>')[0].id) {
fromAddress = places.getPlace().formatted_address;
$('[id*=txtfrom]').val(fromAddress);
$('[id*=txtfrom]').trigger("blur");
} else if ($(input)[0].id == $('#<%=txtto.ClientID%>')[0].id) {
toAddress = places.getPlace().formatted_address;
$('[id*=txtto]').val(toAddress);
$('[id*=txtto]').trigger("blur");
}
var place = places.getPlace();
var lat = place.geometry.location.lat();
var lng = place.geometry.location.lng();
$('#<%=lblorigin_longitude.ClientID%>').html(lat)
$('#<%=lblorigin_longitude.ClientID%>').html(lat)
$('#<%=lbldestination_longitude.ClientID%>').html(lat)
$('#<%=lbldestination_latitude.ClientID%>').html(lat)
});
});
};
</script>
<asp:Label ID="lblorigin_longitude" runat="server" Text=""></asp:Label>
<asp:Label ID="lblorigin_latitude" runat="server" Text=""></asp:Label>
<asp:Label ID="lbldestination_longitude" runat="server" Text=""></asp:Label>
<asp:Label ID="lbldestination_latitude" runat="server" Text=""></asp:Label>
<div class="form-group col-md-2 padding2">
Origin ( City,ST )
<asp:TextBox ID="txtfrom" runat="server" onchange="UploadFile()"></asp:TextBox>
<asp:Label ID="Label6" runat="server" Text="Origin is required" CssClass="validation"
Visible="false"></asp:Label>
<span id="lblFrom" style="display: none; color: Red;">Select valid origin from address
list</span>
<asp:RequiredFieldValidator ID="RequiredFieldValidator3" runat="server" ErrorMessage="Select Origin from address list"
CssClass="validation" ControlToValidate="txtfrom" Display="Dynamic"></asp:RequiredFieldValidator>
</div>
<div class="form-group col-md-2 padding2">
<div runat="server" id="destination">
Destination ( City,ST )
<asp:TextBox ID="txtto" runat="server" onchange="UploadFile()"></asp:TextBox>
<span id="lblTo" style="display: none; color: Red;">Select valid destination from address
list</span>
<asp:RequiredFieldValidator ID="RequiredFieldValidator4" runat="server" ErrorMessage="Select Destination from address list"
CssClass="validation" ControlToValidate="txtto" Display="Dynamic"></asp:RequiredFieldValidator>
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<ContentTemplate>
<asp:Label ID="Llbldistance" runat="server" Text=""></asp:Label><br />
<asp:Label ID="Llblduration" runat="server" Text=""></asp:Label>
<asp:Button ID="Button1" runat="server" Text="Button" OnClick="Button1_Click" Style="display: none" />
</ContentTemplate>
</asp:UpdatePanel>
</div>
</div>
<script type="text/javascript">
function UploadFile() {
document.getElementById("<%=Button1.ClientID %>").click();
if ($('#<%= txtto.ClientID %>').val() != '') {
document.getElementById("<%=RequiredFieldValidator4.ClientID%>").val('');
}
if ($('#<%= txtfrom.ClientID %>').val() != '') {
document.getElementById("<%=RequiredFieldValidator3.ClientID%>").val('');
}
}
</script>
