概要

入力された郵便番号を元に、Google Maps API(google-maps-api-loader)を利用して「都道府県／市区町村／番地」を取得してオートコンプリートでフォームを補完させる方法

事前準備

ライブラリの導入

yarn add google-maps-api-loader
yarn add axios

実装

<template>
  <div>
    <label>郵便番号</label>
    <input
      @input="onChangePostalCodeFirst($event)"
    />
    -
    <input @input="onChangePostalCode($event)" />
    <select v-model="prefectureId">
      <option :value="null" disabled>選択してください</option>
      <option
        v-for="prefecture in prefectures"
        :key="`prefecture-${prefecture.value}`"
        :value="prefecture.value"
      >
        {{ prefecture.label }}
      </option>
    <input ref="address" v-model="address" />
  </div>
</template>

<script>
import GoogleMapsApiLoader from 'google-maps-api-loader'
import axios from 'axios'

export default {
  data() {
    return {
      address: '',
      prefectures: [
        { label: '北海道', value: 1 },
        { label: '青森県', value: 2 },
        ...省略...
      ]
    }
  },
  methods: {
    onChangePostalCodeFirst(event) {
      if (event.target.value.length === 3) {
        this.$refs.postalCodeSecond.focus()
      }
    },
    async onChangePostalCodeSecond(event) {
      if (event.target.value.length === 4) {
        const google = await GoogleMapsApiLoader({
          apiKey: *************,  // APIキーを入力
          libraries: ['places']
        })

        const address = new google.maps.Geocoder()
        address.geocode(
          {
            address: this.postalCode,
            region: 'jp'
          },
          (results, status) => {
            if (status === google.maps.GeocoderStatus.OK) {
              let address = results[0].address_components
              address.shift() // '日本'を削除
              address = address.reverse() // 住所を逆ソート
              address.shift()  // 郵便番号を削除
              address = address.map(data => {
                return data.long_name  // 住所のテキストを抜き出し
              })
              const prefecture = address.shift()  // 都道府県を抜き出し

              this.prefectureId = this.prefectures.find(p => {
                return p.label === prefecture
              }).value
              this.cityAddress = address.join('')
            }
          }
        )
      }
    }
  }
}

動作

参考