npm i vue3-google-address-autocomplete
App.vue
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 |
<template> <div class="autocomplete-container"> <GoogleAddressAutocomplete apiKey="####yourapikey####" v-model="address" @callback="callbackFunction" class="autocomplete-input" placeholder="Enter an address" /> <div v-if="place" class="place-info"> <h2>Address Details</h2> <p><strong>Name:</strong> {{ place.name }}</p> <p><strong>Formatted Address:</strong> {{ place.formatted_address }}</p> <p><strong>Place ID:</strong> {{ place.place_id }}</p> <p><strong>Latitude:</strong> {{ place.geometry.location.lat() }}</p> <p><strong>Longitude:</strong> {{ place.geometry.location.lng() }}</p> <h2>Photos</h2> <div class="photos"> <div v-for="(photo, index) in place.photos" :key="index" class="photo"> <img :src="photo.getUrl()" :alt="'Photo ' + (index + 1)" /> <p v-html="photo.html_attributions[0]"></p> </div> </div> </div> </div> </template> <script setup> import { ref } from 'vue'; import GoogleAddressAutocomplete from 'vue3-google-address-autocomplete'; const address = ref(''); const place = ref(null); // The callbackFunction should handle the place data const callbackFunction = (selectedPlace) => { console.log(selectedPlace); // Debugging info in the console place.value = selectedPlace; }; </script> <style scoped> .autocomplete-container { display: flex; flex-direction: column; align-items: center; padding: 2rem; min-height: 100vh; box-sizing: border-box; overflow-y: auto; /* Enables scrolling if content exceeds viewport height */ } .autocomplete-input { width: 80%; max-width: 500px; padding: 10px; font-size: 16px; border: 1px solid #ccc; border-radius: 5px; margin-bottom: 20px; } .place-info { margin-top: 20px; text-align: left; width: 100%; max-width: 800px; } .place-info h2 { margin-bottom: 10px; } .photos { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; } .photo { border: 1px solid #ccc; border-radius: 5px; padding: 10px; text-align: center; width: 200px; } .photo img { width: 100%; height: auto; border-radius: 5px; } .photo p { margin-top: 5px; font-size: 12px; color: #555; } </style> |
