<template>
  <div class="my-20 mx-auto px-10 w-full">
    <label class="block text-sm w-full font-medium text-gray-700">
      Street
      <input type="text"
             ref="streetRef"
             placeholder="Search street..."
             class="block mt-1 w-full text-sm placeholder-gray-400 rounded-md border-gray-300 focus:ring-blue-500 focus:border-blue-500">
    </label>
  </div>
</template>

<script>
import {onMounted, ref} from "vue";
import useScript from "../composables/useScript";

export default {
  setup() {
    const streetRef = ref(null);

    onMounted(async () => {
      await useScript("https://maps.googleapis.com/maps/api/js?key=YOUR_GOOGLE_API_KEY&libraries=places");
      new google.maps.places.Autocomplete(streetRef.value);
    })

    return {
      streetRef
    }
  }
}
</script>