Introduction:
Here
I will explain how to get latitude and longitude from address Google map api using JavaScript in website or Google maps autocomplete address textbox to get latitude and longitude without map example. By using google.maps.places.Autocomplete class we can
implement Google places autocomplete
textbox and display selected address latitude and longitude details.
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 and get latitude and longitude from address 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
|
|||
7 comments :
How can i show the map as well.
Thank you Suresh .. Really its works out.. Thanks lot..
Thank You it worked.
Thanks Suresh it works partially.
Actually the latitude and longitude didn't bind and shows undefined.
What should I do now....help?
where we have to write this code in web form or in html form please reply
can't get the latt and long
i tried this code just simply used copy and paste but my bad luck code is not working when i tried to type area name in text box the control became disabled with error sign.....
Note: Only a member of this blog may post a comment.