Vue Google Place Search (custom)

<template>
  <div class="google-place-search">
    <md-field md-clearable>
      <label v-if="title">{{title}}</label>
      <md-input v-model="key"
                id="input"
                @focus="inputFocused = true"
                @blur="blurInput()"
                autocomplete="off"></md-input>
    </md-field>
    <template v-if="resultPlaces && resultPlaces.length && inputFocused">
      <ul class="google-place-search__results">
        <template v-for="(place, index) in resultPlaces">
          <li :key="index" @click="selectPlace(place)">
            <img src="../../assets/images/google_place_pin.png" alt="">{{limitString(place.description, 48)}}
          </li>
        </template>
      </ul>
    </template>
  </div>
</template>

<script>
  export default {
    name: 'google-place-search',
    data: () => ({
      key: null,
      searchDelayTimeout: null,
      resultPlaces: [],
      selectedPlace: null,
      inputFocused: false
    }),
    props: {
      title: {
        default: null,
        required: false
      }
    },
    mounted() {
      body_script('https://maps.googleapis.com/maps/api/js?v=3&key=' + process.env.GOOGLE_MAP_KEY + '&libraries=places', function () {
        setTimeout(() => {
        }, 500)
      }.bind(this))
    },
    watch: {
      key(val) {
        if(val) {
          clearTimeout(this.searchDelayTimeout);
          this.searchDelayTimeout = setTimeout(() => {
            this.searchPlace(val)
          }, 800)
        }
      }
    },
    methods: {
      displaySuggestions(predictions, status) {
        if (status !== google.maps.places.PlacesServiceStatus.OK) {
          this.$bus.$emit('snackbar','No results')
          return;
        }

        this.resultPlaces = predictions && predictions.length ? predictions.slice(0,5) : []
      },
      searchPlace(key) {
        var service = new google.maps.places.AutocompleteService();

        var request = {
          input: key,
          componentRestrictions: {
            country: 'BD'
          },
          origin: new google.maps.LatLng(23.7984463, 90.4031033)
        };

        service.getPlacePredictions(request, this.displaySuggestions);
      },
      selectPlace(place) {
        this.selectedPlace = place
        this.placeSelectedPlaceOnInput(this.selectedPlace)
        this.$emit('select', this.selectedPlace)
      },
      placeSelectedPlaceOnInput(place) {
        this.key = place.description
        this.resultPlaces = []
      },
      constructShebaPlaceObject(place) {
        this.fetchLocationIdByLatLng(place)
      },
      limitString(str, limit) {
        if (str.length > limit) {
          return str.slice(0, (limit-2)) + '..'
        }
        return str
      },
      blurInput() {
        setTimeout(() => {
          this.inputFocused = false
        },1000)
      },
      body_script(src, callback) {
        if (document.querySelector("script[src='" + src + "']")) {
          return;
        }
        let script = document.createElement('script');
        script.setAttribute('src', src);
        script.setAttribute('type', 'text/javascript');
        script.defer = true
        document.body.appendChild(script)
        setTimeout(callback, 600);
      }
    }
  }
</script>

<style lang="scss" scoped>
  @import "../../scss/colors";
  @import "../../scss/typography";
  @import "../../scss/variables";
  .google-place-search {
    width: 100%;
    max-width: 500px;
    @media only screen and (max-width: 768px) {
      max-width: 95%;
    }
    .md-field {
      margin: 0;
    }
    &__results {
      margin: 0;
      box-shadow: 0 5px 10px rgba(0,0,0,0.08);
      border-radius: $border-radius;
      list-style: none;
      padding: 0;
      li {
        padding: 16px;
        border-bottom: 1.5px solid $lighter-grey;
        cursor: pointer;
        img {
          margin-right: 10px;
        }
      }
    }
  }
</style>