Welcome folks today in this blog post we will be using google places api autocomplete textbox with location filters and plot selected location in google maps.All the full source code of the application is shown below.
Get Started
In order to get started you need to make an index.html file and copy paste the following code
index.html
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
<!DOCTYPE html> <html> <head> <title>Place Autocomplete</title> <script src="https://maps.googleapis.com/maps/api/js?key=##yourapikey##&libraries=places"></script> </head> <body> <input id="search-input" type="text" placeholder="Enter a city"> <div id="map" style="height: 800px; width: 100%;"></div> </body> </html> |
As you can see we are including the cdn of the google places api and here you need to include the api key from the google cloud console. And inside the html we have the input field where the user can enter the location and then we have the section where we will be displaying the map and we have given the width and height.
And now you need to write the javascript code where we will be calling the google places api and then first of all we will be rendering the google map with latitude and longitude. And here we will be writing the code inside the onload event handler
|
1 2 3 4 5 6 7 8 9 10 11 |
window.onload = () => { var input = document.getElementById("search-input"); var map = new google.maps.Map(document.getElementById("map"), { zoom: 4, center: { lat: -34.397, lng: 150.644 }, scrollwheel: true, }); var marker = new google.maps.Marker({ map: map, }); }; |
As you can see in the above code we are getting the reference of the input field and also the map section and then we are initializing the google map passing the zoom and latitude and longitude. And then we are plotting the red marker inside the map.
Adding the Autocomplete Field With Location Filters
Now guys we will be adding the location autocomplete field with filters passing only the cities present inside the united states as shown below
|
1 2 3 4 5 6 7 |
var options = { types: ["(cities)"], componentRestrictions: { country: ["us"] }, }; var autocomplete = new google.maps.places.Autocomplete(input, options); autocomplete.bindTo("bounds", map); |
We can also provide multiple countries as well by providing as an array as shown below
|
1 2 3 4 5 6 7 |
var options = { types: ["(cities)"], componentRestrictions: { country: ["us","ind","fr","nz"] }, }; var autocomplete = new google.maps.places.Autocomplete(input, options); autocomplete.bindTo("bounds", map); |
Plotting the Selected Location in Google Maps
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
autocomplete.addListener("place_changed", function () { marker.setVisible(false); var place = autocomplete.getPlace(); if (!place.geometry) { // User entered the name of a Place that was not suggested and // pressed the Enter key, or the Place Details request failed. window.alert("No details available for input: '" + place.name + "'"); return; } // If the place has a geometry, then present it on a map. if (place.geometry.viewport) { map.fitBounds(place.geometry.viewport); } else { map.setCenter(place.geometry.location); map.setZoom(17); // Why 17? Because it looks good. } marker.setPosition(place.geometry.location); marker.setVisible(true); }); |
As you can see we are listening for the places_changed event and inside it we are getting the location selected by the user and then we are plotting that location using the red marker on the google maps as shown below
FULL SOURCE CODE
index.html
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 |
<!DOCTYPE html> <html> <head> <title>Place Autocomplete</title> <script src="https://maps.googleapis.com/maps/api/js?key=##yourapikey##&libraries=places"></script> <script> window.onload = () => { var input = document.getElementById('search-input'); var map = new google.maps.Map(document.getElementById('map'), { zoom: 4, center: { lat: -34.397, lng: 150.644 }, scrollwheel:true }); var marker = new google.maps.Marker({ map: map }); var options = { types: ['(cities)'], componentRestrictions: { country: ['us'] } }; var autocomplete = new google.maps.places.Autocomplete(input, options); autocomplete.bindTo('bounds', map); autocomplete.addListener('place_changed', function () { marker.setVisible(false); var place = autocomplete.getPlace(); if (!place.geometry) { // User entered the name of a Place that was not suggested and // pressed the Enter key, or the Place Details request failed. window.alert("No details available for input: '" + place.name + "'"); return; } // If the place has a geometry, then present it on a map. if (place.geometry.viewport) { map.fitBounds(place.geometry.viewport); } else { map.setCenter(place.geometry.location); map.setZoom(17); // Why 17? Because it looks good. } marker.setPosition(place.geometry.location); marker.setVisible(true); }); } </script> </head> <body> <input id="search-input" type="text" placeholder="Enter a city"> <div id="map" style="height: 800px; width: 100%;"></div> </body> </html> |
