Get dropdown list of locations using Google Maps API
maps JavaScript API is great library to get location dropdown suggestion. Assume, you are developing project in which you want to add location auto suggestion for site user. Its look like impossible to manage locations of all over the world. Here, Google maps API makes it pretty thing. It fetches locations from google map and set autosuggestion to control of web page. It does not require API key and little bunch of code required to do this thing.
Google Autocomplete suggest
Here is few steps involves basic autocompete functions.
First of all, Create simple HTML page and load jQuery and Google JavaScript Maps API in your page. Add below into <head> or at the end of <html> tag.
|
1
|
<script src="https://maps.googleapis.com/maps/api/js?sensor=false&libraries=places"></script>
|
Add textbox and button controls in your html page. After doing two steps your HTML file would looked as below.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
|
<html>
<head>
<title>Google location autosuggestion</title>
</head>
<body>
<div>
<input type="text" name="location" id="location" autofocus="" />
</div>
<div style="margin-top: 10px;">
<button id="btnSubmit">Submit</button>
</div>
<script src="js/jquery-1.10.0.min.js"></script>
<script src="https://maps.googleapis.com/maps/api/js?sensor=false&libraries=places"></script>
</body>
</html>
|
Add below code in end of <html> tag.
|
1
2
3
4
5
6
7
8
|
<script>
$(document).ready(function () {
var _control = $('input[name="location"]')[0];
return new google.maps.places.Autocomplete(_control, {
types: ["geocode"]
});
});
</script>
|
var _control = $('input[name="location"]')[0]; finds control having “location” name in a page and initialize autocomplete with control. make sure that you have only one control having name “location”. If you have any queries then comment is available or you can contact me at
