Vue.js + Places API: Build A Nearby Locations App
Tags: javascript, webdev, beginners, programming
Published: 2021-05-10 14:07:10

{% youtube ID-_D0zJlSM %}

By the end of this tutorial, you will know how to build a simple app called **CloseBuy** that will get nearby places, such as restaurants, based on the user’s current location using [Vue.js](https://vuejs.org/) and [Google Maps JavaScript API](https://developers.google.com/maps/documentation/javascript/overview?utm_source=google&utm_medium=cpc&utm_campaign=FY18-Q2-global-demandgen-paidsearchonnetworkhouseads-cs-maps_contactsal_saf&utm_content=text-ad-none-none-DEV_c-CRE_359194145415-ADGP_Hybrid+%7C+AW+SEM+%7C+BKWS+%7E+Google+Maps+Javascript+API-KWID_43700045479855436-kwd-341556983684-userloc_9001132&utm_term=KW_%2Bmaps+%2Bjavascript+%2Bapi-ST_%2Bmaps+%2Bjavascript+%2Bapi&gclid=CjwKCAiA1L_xBRA2EiwAgcLKA-XKva-IKm9yYOgMBjByiimET6s_xsrOcR6PJJpVRQUsBURqGOnkzhoCBYYQAvD_BwE).

Also, I am going to cover how to **add** nearby locations to **Google Maps**.

Let’s take a look at our simple CloseBuy App below.

![alt text](https://softauthor.com/wp-content/uploads/2020/01/vuejs-maps-places-api-close-buy-1.gif)

I assume that you already know:

{% youtube 3A57dcz8A8E %}

- How to get [up and running with vue.js](https://softauthor.com/getting-started-with-vue-js/) project using Vue CLI.
- How to [obtain an API Key](https://softauthor.com/google-maps-api-key/) from the Google Cloud Console.

{% youtube ASiEw-eakWM %}

Once the Vue project is up and running, create a page based component inside the pages folder called **CloseBuy.vue** and set a route for it.

As you can see, our final CloseBuy app has three UI View Components which are:

- [User Input Form](https://softauthor.com/vue-js-google-maps-api-build-a-nearby-places-app/#user-input-form-using-semantic-ui) on the top left,
- [Places List View](https://softauthor.com/vue-js-google-maps-api-build-a-nearby-places-app/#display-locations-in-a-list-view) on the left bottom, and
- [Maps View with Locations](https://softauthor.com/vue-js-google-maps-api-build-a-nearby-places-app/#add-locations-to-google-maps) on the right.

>*I could create three separate vue components for each UI module but for simplicity's sake, I am going to put all the code in a single page-based component.*

###User Input Form Using Semantic UI

Let’s create a two-column grid layout with a [Semantic UI](https://semantic-ui.com/) CSS framework.

Here is the [CDN](https://cdn.jsdelivr.net/npm/semantic-ui@2.4.2/dist/semantic.min.css) link for it.

In the **CloseBuy.vue** component, add the following code in between the template tags:

```HTML
<template>
  <div class="ui grid">
    <div class="six wide column"></div>
    <div class="ten wide column segment ui" ref="map"></div>
  </div>
</template>
```
Inside the left column, add HTML Markup for the User Input Form module.

```HTML
<div class="six wide column">
    <form class="ui segment large form">
      <div class="ui segment">
        <div class="field">
          <div class="ui right icon input large">
            <input type="text" placeholder="Enter your address" v-model="coordinates" />
            <i class="dot circle link icon" @click="locatorButtonPressed"></i>
          </div>
        </div>
        <div class="field">
          <div class="two fields">
            <div class="field">
              <select v-model="type">
                <option value="restaurant">Restaurant</option>
              </select>
            </div>
            <div class="field">
              <select v-model="radius">
                <option value="5">5 KM</option>
                <option value="10">10 KM</option>
                <option value="15">15 KM</option>
                <option value="20">20 KM</option>
              </select>
            </div>
          </div>
        </div>
        <button class="ui button" @click="findCloseBuyButtonPressed">Find CloseBuy</button>
      </div>
    </form>
</div>
```
As you can see in the template, User Input Form has **three** main elements with the class field, which are:

- **Input** field with locator icon button on the right.
- **Type** field which is a drop-down list with a single option *restaurant*.
- **Radius** field which is also a drop-down list with a few options.

The input field is bound to **coordinates** computed property and the locator button has a click event with a callback function **locatorButtonPressed**.

**Type** and **Radius** drop-down elements are bound to type and radius properties respectively in the **data()** model.

```JavaScript
data() {
    return {
      lat: 0,
      lng: 0,
      type: "",
      radius: "",
      places: []
    };
},
computed: {
    coordinates() {
      return `${this.lat}, ${this.lng}`;
    }
}
```
Now, I am going to get the user’s location in the form of geographic coordinates when the locator button is pressed.

So, inside methods object, declare **locatorButtonPressed()** function.

```JavaScript
methods: {
  locatorButtonPressed() {
    navigator.geolocation.getCurrentPosition(
      position => {
        this.lat = position.coords.latitude;
        this.lng = position.coords.longitude;
      },
      error => {
        console.log("Error getting location");
      }
    );
  }
}
```

I use [HTML5 Geolocation API](https://www.w3schools.com/html/html5_geolocation.asp) to get the geographic coordinates.

So, invoke **getCurrentPosition()** method on the **geolocation** object and get latitude and longitude values from the position object.

Then, assign them to the **lat** and **lng** properties that are declared in the **data()** model.

At this stage, the **coordinates** computed property will be set and you can see the values in the input field.

[Continue Reading ...](https://softauthor.com/vue-js-google-maps-api-build-a-nearby-places-app/)