Location predictions and .getPlace() using Google Maps loader for Place Autocomplete not working in Vue

Question

I spun up a Vue 2 app using the vue cli. When I type an address I am not seeing any suggestions populate from the dropdown. In the newtwork tab, I see AutocompletionService.GetPredictions call firing and there are no errors upon page loading.

From my previous question, stackoverflow, I was prompted to use the google maps loader,npm, which I did.

<template>
  <div id="app">
    <img alt="Vue logo" src="./assets/logo.png" />
    <!-- <HelloWorld msg="Welcome to Your Vue.js App" /> -->
    <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>

When an address is entered and submitted, there is no error either. I'm not sure what I am doing incorrectly. I followed the google developers video, google places autocomplete widget, and closely checked the docs, AutocompleteService Class. As mentioned above the network call is to AutocompleteService class instead of just Autocomplete (since this is a widget). My loader is calling a constructor for Autocomplete. Why is this? How do I wire this up to work?

EDIT

I added a codesandbox and modified the code from defining onPlaceChanged, to an anonymous function as in the docs, docs example

score 0 · Accepted Answer · answered Jan 06 '22 at 14:57

Everything was correct, the error was in the options object. Instead of type: cities, it should have been type: address (at least for my purposes). Using @googlemaps/js-api-loader worked great and is a superior solution to adding the script tag in index.html. For reference to those that follow, one can also just use an anonymous function as seen in the docs, autocomplete docs example. Also, be cautious of typos. It is very easy to type 'AutoComplete' instead of how it should be, 'Autocomplete'. The docs for the api loader are very sparse, I'm still not sure if there is a callback field. other than that, this example should get you going.

Location predictions and .getPlace() using Google Maps loader for Place Autocomplete not working in Vue

1 Answers1