😎 Google Maps Autocomplete API 구현 | Vue.js

이 튜토리얼에서는 vue.js에서 Google Maps API로 Places Autocomplete Service를 쉽게 구현하는 방법에 대해 설명합니다.

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

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

먼저 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>

이제 동일한 파일에 script 태그를 추가하고 다음을 추가합니다.

// Places.vue

<script>
  export default {
    data: () => ({
      location: '',
      searchResults: [],
      service: null // will reveal this later 🕵️
    })
  }
</script>

설치vue-meta 플러그인 — 설명서가 매우 쉽고 다른 vue 플러그인과 마찬가지로 플러그인이 설치됩니다.

Places.vue에 metaInfo hook 넣기 -

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

여기서 내가 metaInfo를 사용한 이유는 우리가 할 수 있기 때문입니다.

구성 요소가 렌더링될 때만 이동 중에 외부 JS 파일을 다운로드합니다.

JS 파일이 다운로드될 때 호출되는 콜백 함수의 기능을 제공합니다! — 😎

이제 계속 진행하여 가장 기다려온methods 후크를 만들어 보겠습니다.

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

MapsInit 및 displaySuggestions 함수가 수행하는 작업을 살펴보겠습니다.

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

여기에서 우리는 - AutocompleteService라는 Google 장소 서비스를 사용합니다(지금 귀찮게 하지 마세요! 그것 없이 살 수 없다면 google 설명서를 확인하세요 🤷).

나중에 다시 사용할 수 있도록 이 AutocompleteService()를 데이터 속성 'service'에 할당합니다.

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

그리고 이것이 퍼즐의 마지막 조각입니다. watcher 속성의 location

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

따라서 입력 필드에 무엇을 입력하든 위치 속성이 변경되고 위치 속성이 변경될 때마다 서비스 속성에 연결된 getPlacePredictions 함수가 호출됩니다.

getPlacePredictions는 두 개의 매개변수를 수신합니다.

많은 항목이 있지만 여기에서는 입력과 유형만 사용하는 개체입니다.
ㅏ. 입력 - 예측할 쿼리(이 경우 this.locations).
비. 유형 - 결과 유형.

메서드 후크에서 위에서 선언한 콜백 함수는 - displaySuggestions입니다.

모두 끝났습니다!

재미있게 읽으시고 조금이나마 도움이 되셨다면
Consider Buying me a coffee?