マルティスープ
Staff Blog

＜template> ・・・ ＜v-sheet :light=”true” class=”pa-1 d-table search-form-wrapper” style=”” > ＜input id=”search-form-address” class=”px-3 py-2 d-table-cell search-form-address” v-model=”searchText” placeholder=”Search Address” style=”display:block;” > ＜v-icon class=”px-1 d-table-cell” alt=”search icon” :x-large=”true” @click=”addressSearch” > mdi-magnify ＜/v-icon> ＜/v-sheet> ・・・ ＜/template>

＜style scoped> .search-form-wrapper { position: absolute; bottom: 20px; right: 10px; border: solid 4px #757575; border-radius: 30px; cursor: pointer; } .search-form-address { max-width: 400px; border: none; outline: none; } ＜/style>

＜script> ・・・ data : function(){ return { map: null, google: null, marker: null, searchText: null, } }, ・・・ methods: { ・・・ /** * 住所検索 * * @param {String} text * @returns なし */ addressSearch () { const vm = this; const geocoder = new this.google.maps.Geocoder(); if (geocoder) { geocoder.geocode({address: this.searchText }, function(results, status) { if(vm.marker){ vm.marker.setMap(null); } if (status === vm.google.maps.GeocoderStatus.OK) { vm.marker = new vm.google.maps.Marker({ map: vm.map, position: results[0].geometry.location, draggable: false, }); vm.map.setCenter(results[0].geometry.location); } }); } } } ＜/script>