DEV Community

Cover image for Vue.js + Places API: Build A Nearby Locations App
Raja Tamil
Raja Tamil

Posted on • Updated on

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.

alt text

I assume that you already know:

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:

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>
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

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}`;
    }
}
Enter fullscreen mode Exit fullscreen mode

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");
      }
    );
  }
}
Enter fullscreen mode Exit fullscreen mode

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

Discussion (0)