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 Places Autocomplete TextBox Example without Maps

Jun 18, 2015
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:


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 Places Autocomplete TextBox Example without Maps

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

13 comments :

code simplified said...

useful post.
thanks for sharing.....

Raghava Reddy said...
This comment has been removed by the author.
W247.BE webdesign said...

great tutorial, thanks laot

Sen K Mathew said...

Excellent. But in my case longitude and latitude are null

Anonymous said...

thanks dude

John said...

you must change

var intLatitue = place.geometry.location.lat();
var intLongitue = place.geometry.location.lng();

Unknown said...

HI THERE

Anonymous said...

i have pasted this in my html page mvc project..dtill not working

Unknown said...

Code is working on HTML but how to implement the same in asp

Mohsen Turki said...

Hello, I need to implement this textbox on windows form.. can i do that?

Unknown said...

hi how to implement this on asp controls

vicky said...

Error
This page can't load Google Maps correctly.
Do you own this website?

Sbosh said...

Thanks worked for me

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.