Menu
I'm trying to add Google Places Autocomplete on my Website. I'm having a problem with binding my search textbox with Autocomplete without the use of instantiating a google map. What I'm trying to do is, I want to use the autocomplete as a text suggestion on my search field. but sadly, all the tutorials I've seen had autcomplete being used along with a google map. Is there any way around this?
Thanks in advance.
355
It is currently not possible to restrict results to a specific locality. You can use bounds as you have done so above to bias results towards, but not restricted to places contained within the specified bounds. If you believe restriction by locality would be a useful feature please file a Places API - Feature Request.
Google Map with Autocomplete Search BoxCreate an input element ( searchInput ) where the autocomplete addresses search will be added. Create a DIV element ( map ) to display the Google Map. Specify the elements to display the geolocation data.
Guys you can use following code.
<!DOCTYPE html>
<html>
<head>
<link type="text/css" rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500">
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false&libraries=places"></script>
<script>
var autocomplete;
function initialize() {
autocomplete = new google.maps.places.Autocomplete(
/** @type {HTMLInputElement} */(document.getElementById('autocomplete')),
{ types: ['geocode'] });
google.maps.event.addListener(autocomplete, 'place_changed', function() {
});
}
</script>
</head>
<body onload="initialize()">
<div id="locationField">
<input id="autocomplete" placeholder="Enter your address" onFocus="geolocate()" type="text"></input>
</div>
</body>
</html>
Edit: Google Maps now require an API key for this to work.
97
This is a pretty old thread but google now requires an API for all of their maps based services and I felt that the code example could be simplified a little.
Inside head element (update code with your input element id attribute):
<script type="text/javascript">
function initAutocomplete() {
// Create the autocomplete object, restricting the search to geographical
// location types.
autocomplete = new google.maps.places.Autocomplete(
/** @type {!HTMLInputElement} */(document.getElementById('YOUR_INPUT_ELEMENT_ID')),
{types: ['geocode']});
// When the user selects an address from the dropdown, populate the address
// fields in the form.
autocomplete.addListener('place_changed', fillInAddress);
}
function fillInAddress() {
// Get the place details from the autocomplete object.
var place = autocomplete.getPlace();
}
</script>
Inside your page confirm you have a text input with an ID attribute that matches the above script:
<input type="text" id="YOUR_INPUT_ELEMENT_ID" />
Just before the close of your body tag add this script (update with your own API key):
<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&libraries=places&callback=initAutocomplete" async defer></script>
Other notes:
42
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
