Vue.js + Places API: Build A Nearby Locations App

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 and Google Maps JavaScript API.

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.

I assume that you already know:

• How to get up and running with vue.js project using Vue CLI.
• How to obtain an API Key from the Google Cloud Console.

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 on the top left,
• Places List View on the left bottom, and
• Maps View with Locations 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 CSS framework.

Here is the CDN link for it.

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

<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.

<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.

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.

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 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 ...