Introduction:
Here
I will explain how to implement Google map places autocomplete
textbox using Google
API
using JavaScript in website or Google places autocomplete
example textbox without map example. By using google.maps.places.Autocomplete class we can
implement Google places autocomplete
textbox and display selected address details including latitude and longitude.
Description:
In
previous article I explained clearly how to add Google map to website in
asp.net,
Add marker to Google map in asp.net
website,
Add multiple markers to Google map
using JSON,
Add custom marker to Google maps API,
Show info window in Google map when click on marker and many articles relating to Google map, jQuery, JavaScript, asp.net. Now I will explain
how to how to implement Google map places autocomplete
textbox using Google
API
using JavaScript.
To
implement places or address autocomplete textbox using Google maps Google
API
we need to write the code like as shown below
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Google Places
Autocomplete textbox using google maps api</title>
</head>
<body>
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&signed_in=true&libraries=places"></script>
<script type="text/javascript">
google.maps.event.addDomListener(window, 'load',
initialize);
function initialize() {
var autocomplete = new
google.maps.places.Autocomplete(document.getElementById('txtAutocomplete'));
google.maps.event.addListener(autocomplete, 'place_changed', function () {
// Get the place details from the autocomplete
object.
var place =
autocomplete.getPlace();
var location = "<b>Address</b>: " +
place.formatted_address + "<br/>";
location += "<b>Latitude</b>:
" + place.geometry.location.A + "<br/>";
location += "<b>Longitude</b>:
" + place.geometry.location.F;
document.getElementById('lblResult').innerHTML
= location
});
}
</script>
<span>Location:</span>
<input type="text"
id="txtAutocomplete"
style="width: 300px" placeholder="Enter
your address" /><br /><br />
<label id="lblResult"
/>
</body>
</html>
|
Demo
 |
|
If you enjoyed this post, please support the blog below. It's FREE! Get the latest Asp.net, C#.net, VB.NET, jQuery, Plugins & Code Snippets for FREE by subscribing to our Facebook, Twitter, RSS feed, or by email. |
|||
Subscribe by RSS
Subscribe by Email
|
|||
13 comments :
useful post.
thanks for sharing.....
great tutorial, thanks laot
Excellent. But in my case longitude and latitude are null
thanks dude
you must change
var intLatitue = place.geometry.location.lat();
var intLongitue = place.geometry.location.lng();
HI THERE
i have pasted this in my html page mvc project..dtill not working
Code is working on HTML but how to implement the same in asp
Hello, I need to implement this textbox on windows form.. can i do that?
hi how to implement this on asp controls
Error
This page can't load Google Maps correctly.
Do you own this website?
Thanks worked for me
Note: Only a member of this blog may post a comment.