Google places autocomplete is a crucial component of my application and when testing on mobile devices in Chrome, the address suggestions are not populating in the dropdown. In the network tab, the AutocompletionService.GetPredictions calls are all 200. How can I fix this? It works perfectly in a desktop view, but mobile or tablet devices, no. I also tried rotating the orientation of the device to no avail. I load the api using
“@gogglemaps/js-api-loader”, https://www.npmjs.com/package/@googlemaps/js-api-loader.
AddressAutocomple.vue
<template>
<div>
<h2 class="group-header">
{{ title }}
</h2>
<h4>Address + City</h4>
<input id="detailedLocation" ref="autocomplete" type="text" />
<p
v-if="!isValidAddress"
class="serviceAreaNotice"
:class="{ errorMessage: !isValidAddress }"
>
Please enter a valid address within our service area
</p>
<div>
<p class="message">
see our<router-link to="/service">service area</router-link>
</p>
</div>
</div>
</template>
<script>
import { mapActions, mapState } from "vuex";
import { Loader } from "@googlemaps/js-api-loader";
import { serviceAreaZipCodes } from "../Selections/selections";
const loader = new Loader({
apiKey: "AIzaSyBvWBtJ5i..........", //check api key
version: "weekly",
libraries: ["places"],
async: "defer"
});
export default {
name: "App",
data() {
return {
info: null,
searchResults: [],
address: {
unit: "",
street: "",
city: "",
state: "",
zip: ""
},
title: "Where?"
};
},
computed: {
...mapState(["isValidAddress"])
},
async mounted() {
let location;
const center = { lat: 42.84498856765032, lng: -74.71060855293794 };
// Create a bounding box with sides ~10km away from the center point
const defaultBounds = {
north: center.lat + 0.5,
south: center.lat - 0.5,
east: center.lng + 0.5,
west: center.lng - 0.5
};
const input = document.getElementById("detailedLocation");
const options = {
types: ["address"],
bounds: defaultBounds,
componentRestrictions: { country: "us" },
fields: [
"place_id",
"geometry",
"name",
"address_components",
"formatted_address"
]
};
loader
.load()
.then(google => {
location = new google.maps.places.Autocomplete(input, options);
location.addListener(
"place_changed",
() => {
const place = location.getPlace();
if (!place.geometry || !place.geometry.location) {
// User entered the name of a Place that was not suggested and
// pressed the Enter key, or the Place Details request failed.
window.alert(
"No details available for input: '" + place.name + "'"
);
document.getElementById("detailedLocation").placeholder =
"Enter a place";
return;
} else {
document.getElementById("detailedLocation").innerHTML =
place.formatted_address;
}
let addressComponents = place.address_components;
this.addressInServiceArea(addressComponents);
}
);
})
.catch(error => {
console.log(error);
return error;
});
},
methods: {
...mapActions([
"updateApt",
"updateUnit",
"updateStreet",
"updateCity",
"updateState",
"updateZip",
"updateIsValidAddress"
]),
// prompts user to allow device location
locatorInfo() {
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(position => {
console.log(position.coords.latitude, position.coords.longitude);
});
}
},
displaySuggestions(predictions, status) {
if (status !== window.google.maps.places.PlacesServiceStatus.OK) {
this.searchResults = [];
return;
}
this.searchResults = predictions.map(
prediction => prediction.description
);
},
saveAddressToState(placeObject) {
let unit = placeObject[0]["short_name"];
let street = placeObject[1]["short_name"];
let city = placeObject[2]["short_name"];
let statehood = placeObject[5]["short_name"];
let zip = placeObject[7]["short_name"];
this.updateUnit(unit);
this.updateStreet(street);
this.updateCity(city);
this.updateState(statehood);
this.updateZip(zip);
},
addressInServiceArea(placeObject) {
console.log(placeObject);
const zip = placeObject[7]["short_name"];
let isInServiceArea = serviceAreaZipCodes.includes(zip);
if (isInServiceArea) {
this.saveAddressToState(placeObject);
this.updateIsValidAddress(true);
} else {
this.updateIsValidAddress(false);
}
// console.log(this.address.zip, isInServiceArea, "line 127");
return isInServiceArea;
}
}
};
</script>
After the user clicks the address, I run a zip code validation check for the service area.
Mobile
Desktop
