Week 7: Creating the Shopping and Eating Pages with Maps

Today, I created the pages for the categories "shopping" and "eating". For this, I wanted to use a nearby search.

A nearby search (as the term is used on Google Maps API) is a search that, starting at a certain point on a map, looks for all results matching a search term or category in a predefined radius around the starting point. Enschede offers a great deal of shops and restaurants to its residents and visitors, which is why I decided to use a nearby search for our Shopping and Eating pages.

With this, we want to give our visitors at de Broodbode the opportunity to find shops and restaurants that are located close to de Broodbode.

---

Before starting with the nearby search, the first decision to be made was which API to use. Besides Google maps, the two biggest providers of map services and corresponding APIs are Bing Maps by Microsoft and HERE Maps. I compared the three services on their versatility and their price. The versatility is the amount of functionality that the API offers, especially with respect to the functionality that we need (nearby search and navigation). Pricing refers to the price of the API.

The decision was not easy. Bing was removed from the list of possible map providers due to the fact that it only offers nearby searches within the US. Between Google and HERE, it was almost a draw.

Eventually, the financial aspect weighed a bit heavier than the functionality. Google is just a bit too expensive, especially if we cannot predict how many people are actually going to use our installation and the website during the three days. We have already spent so much money on building materials that we want to cut on costs wherever we can.

Nearby searches are possible with HERE, and especially the fact that query-based searches are possible attracted our interest. You can enter any random search term into the query and HERE will return locations related to that search term. For the navigation, I had to find a little detour. I managed to program a (cost-free) query link for Google Maps using the data from the HERE nearby search that will open the route to the destination a user wants to visit in this user’s Google Maps app. And since most people have the Google Maps app on their phones, this solution feels fine to me.

---

HERE uses external JavaScript code that needs to be linked in the head of the document. Several links are required for the functionality that I built:

Maps are used on the Eating and Shopping pages of the website. In order not to confuse the map JavaScript code too much with the rest of the website, I created a new document called “map.js”, which is called in the body of the HTML document.

In the beginning, a category of food or type of restaurant is selected. Unlike the Events Page, the Eating page does not allow the user to select multiple categories at once. The map, centred around de Broodbode, is already shown, but no locations are marked yet.

The code has been obtained from the HERE API website. The next step consisted of the search query. I decided for a search query based on a custom search term. The search term is determined by the category the user selects. I defined a search radius of 500 metres around de Broodbode.

When the search is done, markers appear on the map as a group. The map also adjusts to a resizing of the window, which happens as the search categories are hidden in order to leave more space for the map itself.

In order to fill the group with data, a search is conducted.

The code also specifies what happens if there is a result or an error from the API.

The search request uses the parameters “query” and “in” (starting point and radius), as introduced above. If there is a result from the query, the function addPlacesToMap is called. In this function, the content of the info bubble is already set. There is the name and location of the place as well as the link to open Google Maps and start the navigation.

The tap event makes sure that the info bubble is only opened when you click on one of the markers on the map. For this marker, the corresponding address details are displayed.