In this article I will explain with an example, how to implement Google Places (Address) AutoComplete TextBox in ASP.Net using C# and VB.Net.
This article will explain how to get the complete Address of a Location using the Google Places API of Google Maps and then send the complete Address and its Geographical coordinates i.e. Latitude and Longitude to Server Side method in ASP.Net using C# and VB.Net.
The Google Places (Address) AutoComplete TextBox is part of Google Maps API and it is used to find out Address and their Geographical coordinates i.e. Latitude and Longitude of a Location.
Note: In order to execute the Google Maps application you will need to register and get an API key from Google API. For more details refer here.
HTML Markup
The following HTML Markup consists of four ASP.Net TextBoxes and an ASP.Net Button. The Button has been assigned with an OnClick event handler.
Inside the Google Maps API load event handler, the Google Places AutoComplete plugin has been applied to the Location TextBox.
Also, an event handler place_changed has been applied which will be triggered when a selection is made from the AutoComplete List of the Google Places (Address) AutoComplete TextBox.
When an Address of a Location is selected, the details such has complete Address, Latitude and Longitude are set into their respective TextBoxes.
<table border="0" cellpadding="5" cellspacing="0">
<tr>
<td>Location</td>
<td><asp:TextBox ID="txtLocation" runat="server" Width="200" /></td>
</tr>
<tr>
<td>Address</td>
<td><asp:TextBox ID="txtAddress" runat="server" Width="200" /></td>
</tr>
<tr>
<td>Latitude</td>
<td><asp:TextBox ID="txtLatitude" runat="server" Width="200" /></td>
</tr>
<tr>
<td>Longitude</td>
<td><asp:TextBox ID="txtLongitude" runat="server" Width="200" /></td>
</tr>
<tr>
<td></td>
<td><asp:Button Text="Submit" runat="server" OnClick = "OnSubmit" /></td>
</tr>
</table>
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?sensor=false&libraries=places&key=<API Key>"></script>
<script type="text/javascript">
google.maps.event.addDomListener(window, 'load', function () {
var places = new google.maps.places.Autocomplete(document.getElementById('<%=txtLocation.ClientID %>'));
google.maps.event.addListener(places, 'place_changed', function () {
var place = places.getPlace();
document.getElementById('<%=txtAddress.ClientID %>').value = place.formatted_address;
document.getElementById('<%=txtLatitude.ClientID %>').value = place.geometry.location.lat();
document.getElementById('<%=txtLongitude.ClientID %>').value = place.geometry.location.lng();
});
});
</script>
Fetching the Address, Latitude and Longitude of a Location on Server Side in ASP.Net
Inside the OnSubmit event handler, the values of the Address, Latitude and Longitude TextBoxes are fetched and displayed in JavaScript Alert Message Box.
Note: The values of the Address, Latitude and Longitude TextBoxes can also be saved in Database Table.
C#
protected void OnSubmit(object sender, EventArgs e)
{
string message = "Address: " + txtAddress.Text;
message += "\\nLatitude: " + txtLatitude.Text;
message += "\\nLongitude: " + txtLongitude.Text;
ClientScript.RegisterStartupScript(this.GetType(), "alert", "alert('" + message + "');", true);
}
VB.Net
Protected Sub OnSubmit(ByVal sender As Object, ByVal e As EventArgs)
Dim message As String = "Address: " & txtAddress.Text
message &= "\nLatitude: " & txtLatitude.Text
message &= "\nLongitude: " & txtLongitude.Text
ClientScript.RegisterStartupScript(Me.GetType, "alert", "alert('" & message & "');", True)
End Sub
Screenshot
![Implement Google Places (Address) AutoComplete TextBox in ASP.Net using C# and VB.Net]()
Demo
Downloads
