我如何通过 JavaScript 使用 Google 的 AutocompleteService 获取地址组件？

Question

Google offers different ways to use the Place Autocomplete API. Two of these being the Autocomplete and AutocompleteService classes. Whenever I use the Autocomplete class I get the address components without a problem. However, whenever I use the AutocompleteService the address components are missing. I do get an address but not in the same way I do with Autocomplete (I can parse into city, street, state, etc.).

Is there a way I can get the address components field using AutocompleteService WITHOUT making an additional call with the place ID?

Autocomplete example

function initAutocomplete() {

  autocomplete = new google.maps.places.Autocomplete(document.getElementById('search'), {
    componentRestrictions: { country: ["us", "ca"] },
    fields: ["address_components", "geometry"],
    types: ["address"],
  });

  autocomplete.addListener("place_changed", () => {
    const place = autocomplete.getPlace(); // Includes Address Components and Geometry (Lat and Lng)
  });
}

AutocompleteService example

function initAutocompleteService() {
    const service = new google.maps.places.AutocompleteService();

    service.getPlacePredictions({
    input: "1600 Amphitheatre",
    componentRestrictions: {
        country: 'us'
    },
    types: ['address']
  }, (predictions, status) => {
    console.log(predictions); // It shows the address a single string but missing address components
  });
}

Answer 1

Is there a way I can get the address components field using AutocompleteService WITHOUT making an additional call with the place ID?

Short answer: No, you can't.

If you are worried about billing, you should use Session tokens .

As per the documentation:

AutocompleteService.getPlacePredictions() uses session tokens to group together autocomplete requests for billing purposes.

The interesting part:

You can use the same session token to make a single Place Details request on the place that results from a call to AutocompleteService.getPlacePredictions() . In this case, the autocomplete request is combined with the Place Details request, and the call is charged as a regular Place Details request. There is no charge for the autocomplete request.

Google provides an example on how to create the Session token:

// Create a new session token.
var sessionToken = new google.maps.places.AutocompleteSessionToken();

// Pass the token to the autocomplete service.
var autocompleteService = new google.maps.places.AutocompleteService();
autocompleteService.getPlacePredictions({
  input: 'pizza near Syd',
  sessionToken: sessionToken
},
displaySuggestions);

When user selects a place, you can reuse that same session token to retrieve the place details with the fields you are interested in, in order to get billed only for the place details request (as stated above).

You might also want to read Cost optimization best practices .

Programmatic implementation

Use a session token with your Place Autocomplete requests. When requesting Place Details about the selected prediction, include the following parameters:

1. The place ID from the Place Autocomplete response
2. The session token used in the Place Autocomplete request
3. The fields parameter specifying the place data fields you need

As you can see, the PlaceDetailsRequest interface takes an optional sessionToken parameter.