DEV Community

loading...
Cover image for 😎 Implement Google Maps Autocomplete API | Vue.js

😎 Implement Google Maps Autocomplete API | Vue.js

siddhartharora02 profile image Siddharth Arora ・2 min read

This tutorial explains how you can easily implement a Places Autocomplete Service by Google Maps API in vue.js

NOTE: the picture is fancy because I use VUETIFY. This tutorial just explains how Google Places API work, with no CSS! 😐

Alt Text

Checkout this video for a demo

All we need is a vue component and a plugin called vue-meta (I already use it for SEO)

First let’s create a file called Places.vue

// Places.vue

<template>
  <div>
    <input type="text" v-model="location">
    <ul>
      <li v-for="(result, i) in searchResults" :key="i">
        {{ result }} // list of all places
      </li>
    </ul>
  </div>
</template>
Enter fullscreen mode Exit fullscreen mode

Now add a script tag in the same file and add the following -

// Places.vue

<script>
  export default {
    data: () => ({
      location: '',
      searchResults: [],
      service: null // will reveal this later πŸ•΅οΈ
    })
  }
</script>

Enter fullscreen mode Exit fullscreen mode

Install vue-meta plugin β€” the documentation is very easy and the plugin is installed like any other vue plugin.

Putting the metaInfo hook in Places.vue -

// Places.vue

<script>
  export default {
    data, // already wrote above
    metaInfo () {
      return {
        script: [{
          src: `https://maps.googleapis.com/maps/api/js?key=<YOUR_API_KEY>&libraries=places`,
          async: true,
          defer: true,
          callback: () => this.MapsInit() // will declare it in methods
        }]
      }
    }
  }
</script>

Enter fullscreen mode Exit fullscreen mode

So the reason I used metaInfo here is because we can -

  1. Download external JS files on the go, only when the component is rendered.
  2. It gives us the power of the callback function, called when the JS file is downloaded!β€Šβ€”β€ŠπŸ˜Ž

Now let’s move ahead and create the most awaited methods hook -

// Places.vue

<script>
  export default {
    data // defined already,
    metaInfo // defined already,

    methods: {
      MapsInit () {
        this.service = new window.google.maps.places.AutocompleteService()
      },
      displaySuggestions (predictions, status) {
        if (status !== window.google.maps.places.PlacesServiceStatus.OK) {
          this.searchResults = []
          return
        }
        this.searchResults = predictions.map(prediction => prediction.description) 
      }
    }

  }
</script>

Enter fullscreen mode Exit fullscreen mode

Let's see what these functions MapsInit and displaySuggestions do.

MapInit()β€Š-β€Šthe function that is called when the JS file is loaded.

In this we use a google places service calledβ€Š-β€ŠAutocompleteService (Don't bother right now! Check google documentation if you can't live without it 🀷).

we assign this AutocompleteService() to our data property 'service' so that we can use it again later.

displaySuggestions(predictions, status)β€Š-β€Šexplained a little later.

And this is the last piece of the puzzle. The watcher on the location property

// Places.vue

<script>
  export default {
    data // already defined,
    methods // already defined,
    metaInfo // already defined,
    // the magical part
    watch: {
      location (newValue) {
        if (newValue) {
          this.service.getPlacePredictions({
            input: this.location,
            types: ['(cities)']
          }, this.displaySuggestions)
        }
      }
    }
  }
</script>
Enter fullscreen mode Exit fullscreen mode

So, whatever you type in the input field changes the location property, and whenever the location property is changed, a getPlacePredictions function is called that is attached to the service property.

getPlacePredictions receives two parameters-

  1. An Object that has many things but we only use input and types here-
    a. inputβ€Š-β€Šthe query to be predicted (this.locations in our case).
    b. types - the type of result.

  2. the callback function we declared above in methods hook which isβ€Š-β€ŠdisplaySuggestions.

All done!

Discussion

pic
Editor guide
Collapse
zdev1official profile image
ZDev1Official

I like to use APIs, you can find more here: any-api.com

Collapse
hackwithharsha profile image
Harsha Vardhan

Hi Siddharth,

is it possible to share Github Link ?

Collapse
siddhartharora02 profile image
Siddharth Arora Author

Will create a gist / repo soon!

Collapse
eacarras profile image
Aaron Carrasco

This plugin works for vue3 ? I can not search doc how to initialize vue-meta on vue3.