Recently I’ve had a chance to implement a location search functionality for a food ordering website, similar
to pyszne.pl. The main requirement was to allow the user to fill in
his address and based on detected postal code, there would be an info displayed about shipping possibility and cost.
When we want to implement google maps-powered location search in our application, we have 2 components to choose: Autocomplete or SearchBox.
When the user enters a search query in the input, it shows a dropdown list of results. You have a possibility to restrict the search to specific bounds, country or place type in the configuration.
Offers the same search capabilities, although it returns extended list of results - including places and suggestions. When it comes to restricting result list, you can only bias the search towards bounds. It means that places inside your bounds will be shown first, but you will get other results from all over the world as well.
Search restriction to specific bounds
Let’s say we want to limit the results to places in Krakow. Using default configuration, we would see locations from other cities.
In this case we need to choose Autocomplete component, as it provides more restricted results.
In order to make it work as expected, we have to define two geo points:
After refreshing the page, we can see results restricted to selected bounds.
Finding postal code
autocomplete.getPlace() method returns currently selected location and all its details:
The most interesting part of that JSON is the last object inside address_components array:
Autocomplete component emits some events we can listen on, one of them is place_changed, so the solution is to combine place_changed event listener and autocomplete.getPlace() method call: