This week, my fellow Dev Advocate, Jose, and I created a great example project on mapping businesses and displaying place information. Check out our recap here, on our Twitch channel-- we stream every other week, and answer your questions on all things coding and maps, live!
In one of our past Devisodes, we built an example with a clear UI to fetch and display POI information from our map. It looks like this!
As you can see from the sidebar, we show how to take information businesses provide to data sources, such as phone numbers, website links, photos and reviews, and display them in a readable format. While our example doesn't look fancy, it's made to show a start into making a UI after learning more basics about using the the Maps APIs.
In this episode, focused on adding Search Autocomplete. This means that when a user types in the search bar, two key things happen.
Results are narrowed to a radius within the map window (assumingly, the user's location).
The results shown are taken from the best-match business names and categories in the immediate area.
This allows us to add even more precise results to our project. See it in action here!
Lastly, we wrapped up by adding a colored perimeter to the search result we select as a user, providing some visual feedback on the map confirming our choice of POI. We ended the episode looking up Nando's in London, because why not.
This is a great example project for someone wanting to create a web-based map project which allows users to search for places around them -- to find the perfect salon, restaurant, shop, and so on!
Be sure to follow us at twitch.tv/tomtomdevs, and tune into our upcoming Devisodes for the rest of 2020!
Happy Mapping!
Top comments (0)