Google Places Autocomplete API pricing, session tokens, and request optimization

[prathamguptacode]

Hi everyone!

I'm currently implementing Google Places Autocomplete using the new Autocomplete Data API with React and @vis.gl/react-google-maps.

The implementation works, but I'm concerned about Google Maps API pricing, especially during development. I managed to hit my API usage limit within just two days, and I'm trying to understand whether my implementation is making unnecessary requests or whether this is expected behavior.

I'd appreciate some clarification from anyone who has experience with the Google Places API.

1. My current implementation
   I'm using a 500ms debounce to avoid sending a request on every keystroke.

SearchBox component

import { MagnifyingGlassIcon, MapPinIcon } from '@phosphor-icons/react'
import { useState } from 'react'
import { useDebounce } from '@/hooks/useDebounce'
import { useAnimatedPlaceholder } from '@/features/search/hooks/useAnimatedPlaceholder'
import { useMapsLibrary } from '@vis.gl/react-google-maps'
import { useAutocompleteSuggestions } from '@/hooks/useAutoCompleteSuggestions'
import { useNavigate } from 'react-router-dom'

import styles from './styles.module.css'



const SearchBox = () => {
    const [searchQuery, setSearchQuery] = useState('')
    const debouncedSearchQuery = useDebounce(searchQuery, 500)
    const inputRef = useAnimatedPlaceholder()


    return (
        <>
            <div className={styles.searchBox}>
                <MagnifyingGlassIcon size={24} />
                <input placeholder="Search for " ref={inputRef} value={searchQuery} onChange={e => setSearchQuery(e.currentTarget.value)} />
            </div>
            <SearchSuggestions debouncedSearchQuery={debouncedSearchQuery} />
        </>

    )
}

export default SearchBox




type SearchSuggestions = {
    debouncedSearchQuery: string
}

function SearchSuggestions({ debouncedSearchQuery }: SearchSuggestions) {
    const navigate = useNavigate()
    const places = useMapsLibrary('places');
    const { suggestions, resetSession } = useAutocompleteSuggestions(debouncedSearchQuery, {
        includedPrimaryTypes: ["locality"]
    })

    const handleSuggestionClick = async (suggestion: google.maps.places.AutocompleteSuggestion) => {
        if (!places || !suggestion.placePrediction) return

        const place = suggestion.placePrediction.toPlace()
        await place.fetchFields({
            fields: [
                "addressComponents"
            ]
        })
        // calling fetchFields invalidates the session-token, so we now have to call
        // resetSession() so a new one gets created for further search
        resetSession()

        const city = place.addressComponents && place.addressComponents[0].longText
        const placeId = suggestion.placePrediction.placeId
        if (city && placeId) return navigate(`${city}/${placeId}`)
    }



    return !!suggestions.length && (
        <div className={styles.optionBox}>
            {
                suggestions.map(suggestion => <button key={suggestion.placePrediction?.placeId} className={styles.option} onClick={() => handleSuggestionClick(suggestion)}>
                    <div className={styles.iconWrapper}>
                        <MapPinIcon weight="fill" size={20} />
                    </div>
                    <span className={styles.suggestionText}>
                        {suggestion.placePrediction?.text.text}
                    </span>
                </button>
                )
            }
        </div >
    )
}

useAutocompleteSuggestions hook

import { useMapsLibrary } from '@vis.gl/react-google-maps';

export type UseAutocompleteSuggestionsReturn = {
  suggestions: google.maps.places.AutocompleteSuggestion[];
  isLoading: boolean;
  resetSession: () => void;
};

/**
 * A reusable hook that retrieves autocomplete suggestions from the Google Places API.
 * The data is loaded from the new Autocomplete Data API.
 * (https://developers.google.com/maps/documentation/javascript/place-autocomplete-data)
 *
 * @param inputString The input string for which to fetch autocomplete suggestions.
 * @param requestOptions Additional options for the autocomplete request
 *   (See {@link https://developers.google.com/maps/documentation/javascript/reference/autocomplete-data#AutocompleteRequest}).
 *
 * @returns An object containing the suggestions, the current loading-status,
 *   and a function to reset the session.
 *
 * @example
 * ```jsx
 * const MyComponent = () => {
 *   const [input, setInput] = useState('');
 *   const { suggestions, isLoading, resetSession } = useAutocompleteSuggestions(input, {
 *     includedPrimaryTypes: ['restaurant']
 *   });
 *
 *   return (
 *     <>
 *       <input value={input} onChange={(e) => setInput(e.target.value)} />
 *       <ul>
 *         {suggestions.map(({placePrediction}) => (
 *           <li key={placePrediction.placeId}>{placePrediction.text.text}</li>
 *         ))}
 *       </ul>
 *     </>
 *   );
 * }
 * ```
 */
export function useAutocompleteSuggestions(
  inputString: string,
  requestOptions: Partial<google.maps.places.AutocompleteRequest> = {}
): UseAutocompleteSuggestionsReturn {
  const placesLib = useMapsLibrary('places');

  // stores the current sessionToken
  const sessionTokenRef =
    useRef<google.maps.places.AutocompleteSessionToken | null>(null);

  // the suggestions based on the specified input
  const [suggestions, setSuggestions] = useState<
    google.maps.places.AutocompleteSuggestion[]
  >([]);

  // indicates if there is currently an incomplete request to the places API
  const [isLoading, setIsLoading] = useState(false);

  // once the PlacesLibrary is loaded and whenever the input changes, a query
  // is sent to the Autocomplete Data API.
  useEffect(() => {
    if (!placesLib) return;

    const { AutocompleteSessionToken, AutocompleteSuggestion } = placesLib;

    // Create a new session if one doesn't already exist. This has to be reset
    // after `fetchFields` for one of the returned places is called by calling
    // the `resetSession` function returned from this hook.
    if (!sessionTokenRef.current) {
      sessionTokenRef.current = new AutocompleteSessionToken();
    }

    const request: google.maps.places.AutocompleteRequest = {
      ...requestOptions,
      input: inputString,
      sessionToken: sessionTokenRef.current
    };

    if (inputString === '') {
      if (suggestions.length > 0) setSuggestions([]);
      return;
    }

    setIsLoading(true);
    AutocompleteSuggestion.fetchAutocompleteSuggestions(request).then(res => {
      setSuggestions(res.suggestions);
      setIsLoading(false);
    });
  }, [placesLib, inputString]);

  return {
    suggestions,
    isLoading,
    resetSession: () => {
      sessionTokenRef.current = null;
      setSuggestions([]);
    }
  };
}

2. My main questions about pricing
3. How exactly do session tokens work?
   Google documentation mentions session-based pricing, and I'm having trouble understanding what this means in practice.

Does one session token group multiple autocomplete requests into a single billing session?
Are autocomplete requests within the same session free, discounted, or individually billed?
Does the session only become complete when the user selects a prediction and requests Place Details?
What happens if the user types something but never selects a suggestion?
2. Does debouncing actually reduce API costs?
For example, suppose a user types TOKYO.

With a 500ms debounce, will Google receive:

One request after the user finishes typing?
Multiple requests if the user pauses between keystrokes for more than 500ms?
If the user types slowly, could this result in five separate autocomplete requests within the same session?

3. What does Google mean by unlimited autocomplete requests?
   I've seen references to unlimited requests in the Google Maps pricing documentation.

Does this mean unlimited requests within a session, or does it mean something else?

I'm particularly confused about how this relates to actual billing.

3. Is my implementation correct?
   I'd also appreciate feedback on whether my current implementation follows Google's recommended session-token lifecycle.

Some things I'm unsure about:

Am I creating and reusing session tokens correctly?
Is resetting the token after fetchFields() the correct approach?
Should I create a new token when the user clears the search input?
Should I reset the session when the user abandons a search without selecting anything?
Is there a better way to prevent unnecessary API requests?
4. Is Google Places Autocomplete expensive?
I'm building an application that will use city autocomplete as an important feature.

I'm concerned about the cost when the application has hundreds or thousands of users searching for cities.

During development alone, I seem to have hit my API usage limit within two days.

Is this normal, or does it indicate that something is wrong with my implementation?

Would you recommend any alternatives or optimization strategies for reducing Google Places API costs?

5. My goal
   I want to implement Google Places Autocomplete properly while keeping API costs predictable.

I'm not looking for ways to bypass Google's billing. I just want to understand the pricing model, session tokens, and best practices

Any explanations, implementation suggestions, or real-world experiences would be greatly appreciated!

Thanks in advance!

[usefulthink]

Does one session token group multiple autocomplete requests into a single billing session?

The Idea is that if you use the new Autocomplete Data API to get to places-data you pay for, the autocomplete requests leading to finding the Place record to load are grouped in a session and paid together.

So, if you end the autocomplete session by "purchasing" place details (place.fetchFields()) or an address validation, the amount of billed autocomplete request is capped. You only pay for up to 12 requests per session if you get the cheaper essential place details (this seems to be your case here, since you only load the address details for the place), and you don't pay for the autocomplete requests at all if you get the more expensive address validation or non-essential place details. But: If you don't end the session with requesting any place details, all autocomplete requests are charged.

Here is the documentation that explains the sessions: https://developers.google.com/maps/documentation/places/web-service/session-pricing#session-billing, which explains this in much more detail which also contains links to the different SKU's and Price List.

Also have a look at this: https://developers.google.com/maps/documentation/javascript/place-autocomplete-new#best-practices, which has a number of helpful tips for cost- and performance-optimization.

Am I creating and reusing session tokens correctly?

Yes, that seems correct. The session is created correctly and cleared after .fetchFields().

What happens if the user types something but never selects a suggestion?

That's an "abandoned session" and all autocomplete requests will be billed as usual, as if there was no session.

Does debouncing actually reduce API costs?

Yes, that’s one common approach to reduce the cost. Also, maybe wait with the first request until the first three or four characters have been typed.

• One request after the user finishes typing? yes, if the user is fast
• Multiple requests if the user pauses between keystrokes for more than 500ms? also yes, but after typing 'TOK', there might already be the result "TOKIO", and the user doesn't have to type further
• If the user types slowly, could this result in five separate autocomplete requests within the same session? again, yes.

What does Google mean by unlimited autocomplete requests? Does this mean unlimited requests within a session, or does it mean something else?

Yes, but it only applies when the session terminates with one of the more expensive detail requests ("Place Details Enterprise" or "Address Validation")

During development alone, I seem to have hit my API usage limit within two days. Is this normal, or does it indicate that something is wrong with my implementation?

The free tier is 10k requests, that's quite a lot to do in two days of development. The implementation with the hook seems fine, but there might be other problems in your application that cause more requests than needed. I'd recommend adding console.log messages when the session is created (that should happen only once when the hook renders for the first time and then again after a session was ended), and for every autocomplete request. Then you can clearly see if unneeded requests are sent and investigate further.

Would you recommend any alternatives or optimization strategies for reducing Google Places API costs?

This page (already linked above) also has a section about cost-optimization.

Since you only need the address, you can also use the Geocoder with

const gc = new google.maps.Geocoder(); 
const result = await gc.geocode({placeId: placeId})

instead of using .fetchFields(). In this case, all autocomplete requests will be billed, but that might be cheaper overall since geocoding requests are cheaper than placeDetails.

Some more Ideas if you're worried about API cost:

• make sure to set up quotas for the autocomplete- and places-APIs, that way you can control how many requests per day your autocomplete will handle (it stops working if the quota is empty, which might be better than a surprise bill)
• set up alerts and budgets for the google cloud project
• if you only need autocomplete for cities or countries and not street-adresses, that might also be doable without the expensive google APIs (there are only around 50k cities worldwide, and their names are publicly available)
• there are other providers for location autocomplete, even free options (however, the quality and effort you need to put into it varies a lot)