104 lines
3 KiB
Vue
104 lines
3 KiB
Vue
<template>
|
|
<div class="container-fluid container-shadow p-2 rounded-3">
|
|
<div class="row my-3">
|
|
<div class="col">
|
|
<vehicleBanner ref="vehicleBanner" :displayGenericVehicleImage=true />
|
|
</div>
|
|
</div>
|
|
<div class="row my-4">
|
|
<div class="col">
|
|
<label for="autocomplete">Home address</label>
|
|
<input
|
|
ref="autocomplete"
|
|
id="autocomplete"
|
|
placeholder="Search"
|
|
class="form-control search-location"
|
|
onfocus="value = ''"
|
|
type="text"
|
|
/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import vehicleBanner from "@/common-components/vehicle-banner/vehicle-banner";
|
|
export default {
|
|
name: "App",
|
|
components: {
|
|
vehicleBanner,
|
|
},
|
|
|
|
mounted() {
|
|
this.$refs.vehicleBanner.initializeComponent({
|
|
GenericVehicleImage:
|
|
"https://digitalconsumercms-dev.safelite.com/images/default-source/default-album/blurred-image.jpg?sfvrsn=a6ce3034_3",
|
|
});
|
|
|
|
let self = this;
|
|
//AIzaSyDptGCkOPgN2uWJOy4ou4M33phRD4MAoJo - localhost:8080
|
|
//AIzaSyBji_2ApAj2vE_XNGyV-LaUEKrmuElpJ1w
|
|
this.$loadScript(
|
|
"https://maps.googleapis.com/maps/api/js?key=AIzaSyBji_2ApAj2vE_XNGyV-LaUEKrmuElpJ1w&libraries=places"
|
|
)
|
|
.then(() => {
|
|
// Script is loaded, do something
|
|
self.autocomplete = new window.google.maps.places.Autocomplete(
|
|
self.$refs.autocomplete,
|
|
{
|
|
componentRestrictions: { country: ["us"] },
|
|
fields: ["address_components"],
|
|
types: ["address"],
|
|
}
|
|
);
|
|
|
|
self.autocomplete.addListener("place_changed", () => {
|
|
let place = self.autocomplete.getPlace();
|
|
let address1 = "";
|
|
let postcode = "";
|
|
|
|
let input = document.getElementById("autocomplete");
|
|
|
|
for (const component of place.address_components) {
|
|
const componentType = component.types[0];
|
|
|
|
switch (componentType) {
|
|
case "street_number": {
|
|
address1 = `${component.long_name} ${address1}`;
|
|
break;
|
|
}
|
|
|
|
case "route": {
|
|
address1 += component.short_name;
|
|
break;
|
|
}
|
|
case "locality":
|
|
address1 += ", " + component.long_name;
|
|
break;
|
|
case "administrative_area_level_1": {
|
|
address1 += ", " + component.short_name;
|
|
break;
|
|
}
|
|
case "postal_code": {
|
|
postcode = `${component.long_name}${postcode}`;
|
|
break;
|
|
}
|
|
|
|
case "postal_code_suffix": {
|
|
postcode = `${postcode}-${component.long_name}`;
|
|
break;
|
|
}
|
|
}
|
|
|
|
let addressField1 = document.querySelector("#autocomplete");
|
|
addressField1.value = address1 + " " + postcode;
|
|
}
|
|
});
|
|
})
|
|
.catch(() => {
|
|
// Failed to fetch script
|
|
console.log("Unable to load Google Places API script");
|
|
});
|
|
},
|
|
};
|
|
</script>
|