Google Map Autocomplete in Vue.js

Today, we will learn about how we can implement Google Map Autocomplete in Vue.js

Prerequisites:

• Basic Knowledge of Vue.js
• Node.js tobe installed
• API Key For Google Maps
• Vue CLI tobe installed

Lets start.

Goto your desired path, and create a new Vue.js project

Open command prompt and type the following command to create a new project

vue create google-maps-autocomplete-vuejs

Once your project is created navigate to the project and open it in your favorite code editor.

Now, we need to install the vue js google maps package, so type the following command in the terminal to install the package.

npm i vue2-google-maps

Now open the main.js file src folder and replace the file with the below code.

import Vue from 'vue'
import App from './App.vue'
import * as VueGoogleMaps from "vue2-google-maps";

Vue.config.productionTip = false

Vue.use(VueGoogleMaps, {
  load: {
    key: "api-key",
    libraries: "places",
  },
});

new Vue({
  render: h => h(App),
}).$mount('#app')

replace the “api-key” with your google maps key.

Now open the App.vue component file add the following code in it.

<template>
  <div id="app">
    <h2>Autocomplete Google Maps</h2>
    <GmapAutocomplete @place_changed="setPlace" />
    <button class="btn" @click="addMarker">Add</button>

    <GmapMap
      :center="center"
      :zoom="12"
      style="width: 100%; height: 400px; margin-top: 20px"
    >
      <GmapMarker
        :key="index"
        v-for="(m, index) in markers"
        :position="m.position"
        @click="center = m.position"
      />
    </GmapMap>
  </div>
</template>

<script>
export default {
  name: "App",
  data() {
    return {
      center: { lat: 45.508, lng: -73.587 },
      currentPlace: null,
      markers: [],
    };
  },
  methods: {
    setPlace(place) {
      this.currentPlace = place;
    },
    addMarker() {
      if (this.currentPlace) {
        const marker = {
          lat: this.currentPlace.geometry.location.lat(),
          lng: this.currentPlace.geometry.location.lng(),
        };
        this.markers.push({ position: marker });
        this.center = marker;
        this.currentPlace = null;
      }
    },
  },
};
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}

.pac-target-input {
  padding: 10px;
  width: 20%;
}

.btn {
  margin-left: 20px;
  padding: 10px 20px;
  background-color: greenyellow;
}
</style>

That’s it.

Output: