前提・実現したいこと
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
試したこと
環境設定に記述したAPI-Keyが取得できるか確認しました。
process.env.VUE_APP_GOOGLE_MAP_API_KEYで.envに記述したAPI-Keyを表示できました。
APIの呼び出し方に間違いがあるのでしょうか。
よろしくお願いします。
補足情報(FW/ツールのバージョンなど)
npm 6.9.0
vue 3.5.5
回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2019/04/23 14:42