Platforms

Searching for Points of Interest with the HERE Places API in a Vue.js Application

By Nic Raboy | 18 October 2018

When I’m looking at a map, I’m typically using it for two reasons. I’m either trying to navigate between two points or I’m trying to find a certain point of interest on the map. HERE provides an API for finding nearby places using REST and JavaScript, but what if you wanted to use a modern framework? Previously I had written a tutorial titled, Displaying Places on a HERE Map in an Angular Web Application which focused on Angular, but this time around we’re going to focus on Vue.js.

In this tutorial, we’re going to see how to search for nearby places using the HERE Places API for JavaScript and display those points of interest on a map using the Vue.js JavaScript framework.

The following image demonstrates what we hope to accomplish in this tutorial:

We’re going to display a map with a search box. The user will be able to search for a place and all matches will be displayed on the map as markers. When a marker is clicked, the address information will be displayed as an information bubble.

The Requirements

To build an application with the HERE Places API, a few prerequisites must be met:

The Vue CLI must be installed and configured.

A HERE developer account must be available for the appropriate application tokens.

While we won’t be doing anything intense in this tutorial when it comes to Vue.js, and the Vue CLI isn’t a requirement for creating Vue.js applications, it will make our lives easier.

When working with the HERE Location Services (HLS), an app id and app code is required. These can be obtained after creating a free developer account.

To get us up to speed, lets quickly create a project and add the code from those tutorials. From the Vue CLI, execute the following:

vue create here-places-project

The above command will use the Vue CLI wizard to create a project. Because this project is simple, we’re going to use the defaults to the questions asked by the wizard. This means we won’t be using Vuex or a Vue Router.

The next step is to include the HERE JavaScript libraries. Open the project’s public/index.html file and include the following HTML markup:

Essentially, we’ve included a bunch of scripts and a stylesheet. This will give us access to maps, core APIs, and an interactive map user interface. With the libraries in place, let’s get our map component ready. Create a src/components/HereMap.vue file within your project that contains the following:

The above code gets us up to speed when it comes to our component in relation to the other tutorials. We create a placeholder UI component, initialize a few variables, define a few possible component properties, initialize HERE, and center the map.

To use the component, the project’s src/App.vue file should look like the following:

In the data method we are initializing a ui variable and search variable. These will be used throughout our component. In the created method we are setting the search variable using the new places service.

It makes sense to create a places method now for searching. In the methods object, include the following:

When the places method is called, we are passing a query string. To allow multiple searches, we are going to clear the map every time the method is called. When the search is performed, the query string is used along with the latitude and longitude of the centered map.

The response from the search should be coordinates which we’ll later use for placing markers.

Now that we’re able to search, we need to configure search in the parent component. Open the project’s src/App.vue file and make some changes, like so:

A few things have changed. First look in the <template> block. We have an input field bound to a class variable and a button bound to a method in the class. If we look into the class, we initialize our query variable that is bound and define our search method. There are numerous ways to interact with child components, but for this example we’ll use the ref attribute. Using the ref attribute we can call methods from our component, passing the query string.

If you were to print from the places method, you should see results appearing, but not on the map itself.

Interacting with Places using Markers and Information Bubbles

To bring our application to a close, we’re going to display markers for each of the places found. When clicking those places we’re going to see address information through information bubbles.

Go back into the project’s src/components/HereMap.vue file and change the mounted method:

You’ll notice that we added two lines. The first line for behavior gives us the ability to click on markers. Without it, markers will show, but not display anything on click even if click logic is in place. The second line is for our UI objects which will come in the form of information bubbles.

Now we can set our markers and information bubbles through a method like so:

The above dropMarker method will appear in the methods object. The coordinates will be a latitude and longitude and the data will be the address information to present. When creating a marker, we are also creating an event listener for click events. The information bubble will be set using the data that was added to the marker. Once the information bubble is created, the marker is added to the map.

If you do a search now, markers should show up on the map and those markers should have click events associated with them.

Conclusion

You just saw how to use the HERE Places API using JavaScript and the Vue.js framework. Most of the setup was around building a Vue.js component and not so much in the actual searching for points of interest which is great.

If you’re interested in seeing how to search for points of interest with Angular, check out a previous tutorial I wrote on the subject.

by Nic Raboy

Nic Raboy is an advocate of modern web and mobile development technologies. He has experience in Java, JavaScript, Golang and a variety of frameworks such as Angular, NativeScript, and Apache Cordova. Nic writes about his development experiences related to making web and mobile development easier to understand.