Hello Reader's!Sometime you want to use the auto complete as a text suggestion on your search field. Here I am going to explain how you can search city with suggestion.
It's a very simple to use in any application.
First you need to use Google maps API library.
<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>
Then create script code which hold all auto completed data.
<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>
Set initialize function onload in your body tag.
<body onload="initialize()">
Set Your Textbox field where you want to show auto complete result.
<div id="locationField">
Search City: <input id="autocomplete" placeholder="Enter Location Name" onFocus="geolocate()" type="text"></input>
</div>
Put all code together
<!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">
Search City: <input id="autocomplete" placeholder="Enter Location Name" onFocus="geolocate()" type="text"></input>
</div>
</body>
</html>
0 Comment(s)