After setting up a Vue 2 app using the vue cli, I noticed that when typing an address, no suggestions were populating from the dropdown. Checking the network tab, I observed the
AutocompletionService.GetPredictionsIn response to my previous inquiry on Stack Overflow, I was advised to utilize the google maps loader,npm, which I promptly implemented.
<template>
<div id="app">
<img alt="Vue logo" src="./assets/logo.png" />
<input
id="detailedLocation"
ref="autocomplete"
type="text"
v-model="address"
@input="locatorInfo"
/>
<ul>
<li v-for="(result, i) in searchResults" :key="i">
{{ result }} // list of all places
</li>
</ul>
</div>
</template>
<script>
import { Loader } from "@googlemaps/js-api-loader";
const loader = new Loader({
apiKey: "AIzaSyCcm...........",
version: "weekly",
libraries: ["places", "map"],
});
export default {
name: "App",
data() {
return {
info: null,
searchResults: [],
address: "",
};
},
async mounted() {
let location;
const center = { lat: 40.84498856765032, lng: -73.71060855293794 };
// Create a bounding box with sides ~10km away from the center point
const defaultBounds = {
north: center.lat + 0.1,
south: center.lat - 0.1,
east: center.lng + 0.1,
west: center.lng - 0.1,
};
const input = document.getElementById("detailedLocation");
const options = {
types: ["address"], // the error was type: cities
bounds: defaultBounds,
fields: ["place_id", "geometry", "name", "address_components"],
};
loader
.load()
.then((google) => {
location = new google.maps.places.Autocomplete(input, options);
location.addListener(
// document.getElementById("detailedLocation"),
"place_changed",
onPlaceChanged
);
console.log(location);
})
.catch((e) => {
console.log(e);
// do something
});
const onPlaceChanged = () => {
const place = location.getPlace();
console.log(location, place, "LINE 79");
if (!place.geometry) {
document.getElementById("detailedLocation").placeholder =
"Enter a place";
} else {
document.getElementById("detailedLocation").innerHTML =
place.formatted_address;
console.log(place.formatted_address, "line 60");
}
};
},
methods: {
locatorInfo() {
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition((position) => {
console.log(position.coords.latitude, position.coords.longitude);
});
}
},
printData() {
this.displaySuggestions();
console.log(this.$refs["autocomplete"].value);
},
displaySuggestions(predictions, status) {
if (status !== window.google.maps.places.PlacesServiceStatus.OK) {
this.searchResults = [];
return;
}
this.searchResults = predictions.map(
(prediction) => prediction.description
);
},
},
};
</script>
Upon entering and submitting an address, there were no errors detected. Uncertain of what might be going wrong, I revisited the google developers video on google places autocomplete widget, and thoroughly reviewed the documentation on AutocompleteService Class. The network call points to AutocompleteService instead of just Autocomplete, as it would for a widget. Despite initializing the loader's constructor for Autocomplete, the issue persists. What could be causing this discrepancy? How can I troubleshoot and resolve this?
EDIT
I have provided a CodeSandbox link and made modifications to the code by changing the definition of onPlaceChanged to an anonymous function, aligning with the example in the docs, docs example