[Vuejs]-How to get google places details for place id on vue frontend?

1. use this library https://github.com/xkjyeah/vue-google-maps

npm install vue2-google-maps

or

yarn add vue2-google-maps

// somewhere u initialize main Vue app instance or install vue plugin, maybe in main.js
import Vue from 'vue';
import * as VueGoogleMaps from 'vue2-google-maps';

Vue.use(VueGoogleMaps, {
  load: {
    key: 'YOUR_API_KEY',
    libraries: '', // google map library u want to use
  },
  installComponents: true
});

import Vue from 'vue';
import {gmapApi} from 'vue2-google-maps';

export default class SomeComponent extends Vue {
  computed: {
    google: gmapApi,
  },
  data() {
    return {
      placeId: '',
      geocoder: null
    }
  }
  mounted() {
    this.$gmapApiPromiseLazy().then(() => {
      if(this.google) {
        this.geocoder = new this.google.maps.Geocoder();
      }
    });
  },
  methods: {
    geocode() {
      this.geocoder.geocode({placeId: this.placeId}, (results, status) => {
        console.log(results,status);
      })
    }
  }
}

after some studies on google map documentation, to search by placeId, u are more likely to use geocoder

https://developers.google.com/maps/documentation/javascript/reference/geocoder

https://developers.google.com/maps/documentation/javascript/examples/geocoding-place-id

2. rest api https://developers.google.com/maps/documentation/geocoding/intro#place-id

should be something like this:

https://maps.googleapis.com/maps/api/geocode/json?place_id=ChIJd8BlQ2BZwokRAFUEcm_qrcA&key=YOUR_API_KEY