Discover the benefits of implementing Google Maps to a website searching by address, filters, geolocation tracking, and the display of pins on Maps.
Check out our video on navigating Google Maps implemented with WIX Velo, below.
Video Transcript
Hello guys, and welcome to a new Wix demo session.
Today, we will show you how you can use Google Maps to display locations into an interactive map and how we can search and sort locations based on address and geolocation. For that, we will be consuming Google APIs to receive information about the addresses and distances of the locations and the distances between two points. To visualize how it works, let's have a look at this webpage of fast-food brand locations.
As you can see, we added multiple stores of three major fast food brands, each in a different location. Their addresses will appear by hovering over each location. Let's click on the map icon to display the map and to show where each fast-food store is located. As you can see here, we chose Denver as our starting point to be able to view the whole mainland of the USA, but you can choose whatever location you want and adjust the zoom level to be whatever you want.
Going back to the locations, as you can see, each location is displayed as a pin. This is helpful if you would like your visitors to have a sense of where your services or products are located. You can hover over each pin, and it will show you the fast-food brand and its address. What's awesome about this map is it is interactive, meaning you can zoom in and out, activate the street view, and all the fun stuff.
Now, let's click on the list lines icon to go back and show the list of locations. The next feature I would like to talk about today is the ability to sort these fast-food stores by distance. In this video, we will exclusively talk about the field address. If you would like to learn more about the other filters and how they work, you are more than welcome to check out our previous video.
Now, let's go and start typing the address we would like to start from. As we are typing, we'll see some suggestions popping under the field. Once we settle on the one we want, let's click on it. For our example, let's choose Manhattan, New York. As you can see, once I clicked, the distances between my starting address and the locations pop up in each location. In addition to the fact that the list of locations is sorted out based on that distance, showing the closest first. This feature is really helpful if you would like, for example, to build a real estate website and want your visitors to check grocery stores or schools near a house they want to purchase, or check coffee shops and restaurants that are close to a workplace, and so on. There are many, many other examples where this feature is very helpful.
The final feature that I would like to show you today is the geolocation. If you click on this icon here, the browser will localize you, and it will display the closest locations that are near you and will show how far they are from you. This will enhance the experience of your visitors on your website and will make their life much easier.
Of course, at the end, by clicking on reset, you can reset all of your filters, and the locations will be sorted back based on the initial setting.
I hope you guys enjoyed our quick demo, and thank you guys for your time. If you have any questions, please don't hesitate to reach out to us. Send us your questions to our email address, info@codemastersinc.com, or visit our website, codemastersinc.com. Don't forget to check out our previous videos to see what other features you can add to your website. Stay tuned for our next demo session, and thank you for watching.