Google Map API、Geocoderの呼び出し失敗

前提・実現したいこと

googlemap api による緯度・経度の取得を試しているのですが、
google.maps.Geocoderクラスの読み込みに失敗します。

発生している問題・エラーメッセージ

vue.runtime.esm.js?2b0e:619 [Vue warn]: Error in v-on handler: "ReferenceError: google is not defined"

ReferenceError: google is not defined

該当のソースコード

Javascript,Vue.js
1<template>
2  <div id="app">
3
4    <form style="width: 460px;">
5      <el-form ref="searchFormData" :model="searchFormData" label-width="120px">
6        <el-form-item label="Activity place">
7          <el-input v-model="searchFormData.placeName"></el-input>
8        </el-form-item>
9        <el-form-item label="Activity time">
10          <el-col :span="11">
11            <el-date-picker type="date" placeholder="Pick a date" v-model="searchFormData.checkInDate" style="width: 100%;"></el-date-picker>
12          </el-col>
13          <el-col class="line" :span="2">-</el-col>
14          <el-col :span="11">
15            <el-date-picker type="date" placeholder="Pick a date" v-model="searchFormData.checkOutDate" style="width: 100%;"></el-date-picker>
16          </el-col>
17        </el-form-item>
18        <el-form-item>
19          <el-button type="primary" v-on:click="initMap">Submit</el-button>
20          <el-button>Cancel</el-button>
21        </el-form-item>
22      </el-form>
23    </form>
24
25    <div id="map"></div>
26
27    <!-- 確認用 -->
28    <p>住所: {{ searchFormData.placeName }}</p>
29    <p>チェックイン: {{ searchFormData.checkInDate }}</p>
30    <p>チェックアウト: {{ searchFormData.checkOutDate }}</p>
31    <!-- <p>{{ apikey }}</p> -->
32    <p>緯度: {{mapData.lat}}</p>
33    <p>経度: {{mapData.lng}}</p>
34
35  </div>
36</template>
37<script async defer src="https://maps.googleapis.com/maps/api/js?key=process.env.VUE_APP_GOOGLE_MAP_API_KEY&callback=initMap">
38</script>
39<script>
40  export default {
41    name: 'app',
42    data() {
43      return {
44        apikey: process.env.VUE_APP_GOOGLE_MAP_API_KEY,
45        searchFormData: {
46          placeName: '',
47          checkInDate: '',
48          checkOutDate: '',
49        },
50        mapData: {
51          address: '',
52          lat: '',
53          lng: ''
54        }
55      }
56    },
57    methods: {
58        initMap: function() {
59          var address = this.placeName ; //住所を指定
60
61          var geocoder = new google.maps.Geocoder();
62
63          geocoder.geocode({ address: mapData.address }, function (results, status) {
64            if (status === 'OK' && results[0]) {
65
66              // console.log(results[0].geometry.location);
67
68              mapData.lat = results[0].geometry.location.lat();
69              mapData.lng = results[0].geometry.location.lng();
70
71            } else {
72              //住所が存在しない場合の処理
73              alert('住所が正しくないか存在しません。');
74              target.style.display = 'none';
75            }
76
77        });
78      }
79    }
80  }
81
82</script>
83