Aspdotnet-Suresh

aspdotnet-suresh offers C#.net articles and tutorials,csharp dot net,asp.net articles and tutorials,VB.NET Articles,Gridview articles,code examples of asp.net 2.0 /3.5,AJAX,SQL Server Articles,examples of .net technologies

Google Map Api Get Latitude and Longitude from Address in JavaScript

Jun 19, 2015
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

Google Map Api Get Latitude and Longitude from Address in JavaScript

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 RSS subscribe by email Subscribe by Email

7 comments :

Unknown said...

How can i show the map as well.

Karthika said...

Thank you Suresh .. Really its works out.. Thanks lot..

Anonymous said...

Thank You it worked.

Unknown said...

Thanks Suresh it works partially.
Actually the latitude and longitude didn't bind and shows undefined.

What should I do now....help?

Anonymous said...

where we have to write this code in web form or in html form please reply

Unknown said...

can't get the latt and long

Anonymous said...

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.....

Give your Valuable Comments

Note: Only a member of this blog may post a comment.

© 2015 Aspdotnet-Suresh.com. All Rights Reserved.
The content is copyrighted to Suresh Dasari and may not be reproduced on other websites without permission from the owner.