React JS, React Context, React Hooks, Formik, Google Map API, Tailwind CSS
A Store Locator Widget Built With React & Google Map API
A custom widget developed for a home remodeling company in Australia. Helps to add a store locator to the client's website. This widget enables the customer to find the nearest retailers in a given area.
What is the main problem?
The client requires me to build a functionality that enables their customers to find affiliate retailers in Australia. The retailer locator must have some sort of filter functionalities that will help the customers to find the nearest retailers to a given area and limits the search result with the business type category. The search results must display on a Google Map.
- Integration with Google Maps
- Find the nearest retailers in a given area.
- Limit the results with the retailer’s business type.
- Find specific retailers in a given area.
How I built the application?
I used the React Context and useReducer to managed the functionality state and not Redux. I think using Redux is quite overkill for this specific widget’s functionality.
I used the Formik package for rendering form components. I find it easy to control or manage the input fields, errors, validations, events, and form’s state when I’m using Formik.
In terms of styling the widget, I used the Tailwind CSS to add the styles.
I think the most complicated part of this widget was the integration of the Google Map APIs. It’s easy to show the map in the widget, the difficult part is how to show the retailer’s map pin conditionally. I need to show the retailer’s map pin that is only located in a given radius or area.
For example, a user wants to find all the retailers within a 10 km radius. All the retailer’s map pins within this area will be visible on the map.
To be honest, I’m not that good when it comes to Google Maps API because most of the time I’m just embedding maps to my client’s website and there is no complex customization like this one.
I read some of the Google Maps API documentation, I tried to look for related issues that might help as well. After several searching, I came up with a helper method that I can use. Based on Google Map docs, there’s a method called “computeDistanceBetween”. Basically, this method needs the retailer’s position (latitude & longitude), and also the center position of the given area. This method will return a distance value that I can use to compare with the user’s provided radius. If the value (distance) is less than or equal to the user’s provided radius, it means that the current retailer is within the given area.
How does the application work?
It’s easy to use this widget. The user can choose between searching for the nearest retailers and searching for specific retailers. They can easily switch between different forms.
The Address input field is connected to the Places Library of Google Map API. This gives an auto-complete feature so whenever a user searches, a handy suggestion dropdown will show.
The Form for Searching Multiple Retailers:
The default form contains input fields for the Address, Business Unit, and the Radius.
Address – Input for getting the address of the user. Behind the scene, this will get the latitude and longitude of that current address that will be processed to get the retailers.
Business Unit – This is the retailer’s category. The users can choose between these categories to filter out the retailers that they are looking for. This is not required data, if the user didn’t choose any business unit, all retailers in that area will show.
Radius – This is responsible for getting the area in the map that the user wants to search for. For example, the user wants to search for retailers within 25 km using the given address as the center position.
If they are done completing the form, they can click the Search Retailers button. The map will show all the retailer’s map pins that are located in that area.
The Form for Searching Specific Retailers:
This form works like the default form but instead of showing all retailers in that area based on the business unit category, it will show specific retailers only. Useful for searching retailers directly.
This form contains the same input fields except for the Business Unit field, it was replaced with the Branch Name field.
Branch Name – This field is responsible for getting the retailer’s branch name. The keyword doesn’t need to match with the branch name exactly. If the current search matches multiple retailers, the retailer’s map pins will show on the map.
Whenever a user searches for retailers, all the map pins in a given area will show on the map. If a user clicks a pin, a custom info window will show at the bottom left corner of the map. This info window will show the details about the currently selected map pin.
The Reset Button:
If the user wants to do a new search, they can just click the Reset button to restore the widget to its default state.
- The widget doesn’t integrate with Geolocation API. The Geolocation API can help the user to get their location automatically.