Google Places API for autocomplete and fetching values in python variables

Using Streamlit
,
1

Issue with Streamlit + Google Places Autocomplete — Address Not Capturing into Python Variables

Running locally

Hi everyone, I’m testing locally and running into an issue with my Streamlit app.

What I’m Trying to Do

I have a Google Places Autocomplete component (rendered inside components.html) that lets the user select an address. The UI renders properly and the autocomplete dropdown works, but:

When I click on an address, the selected street address and ZIP code are not getting passed back into my Python variables.
The UI shows the selection, but the Streamlit Python code never receives the values.

My goal is to capture the chosen address into Python variables (e.g. street_address, zipcode) and then use them in evaluations after clicking a Submit/Evaluate button.

Something in the components.html → Python bridge isn’t updating the variables when an address is picked.

What I’m Seeing

  • Autocomplete UI renders normally

  • Address selection shows visually in the front end

  • But no Python-side update happens

  • My downstream logic (including Google Maps, comps fetch, etc.) never gets the address

I suspect a Delta generator issue or a missing message callback between the component and Streamlit.

Environment

  • Running Locally

  • Streamlit version: 1.50.0

  • Python version: 3.12.10

  • OS: MacOS

  • Browser: Safari/ Chrome

What I’ve Tried So Far

  • Wrapped the component in components.html(...) with height=... and scrolling=False

  • Tried sending data back to Streamlit via window.parent.postMessage(...)

  • Verified console shows the selected value

  • Confirmed that other components update normally

What I Want

I want to be able to:

  1. Capture the selected address from the Google Places object

  2. Parse street address and ZIP code

  3. Store them into Python variables

  4. Trigger the evaluation logic after clicking a button

Additional Notes

I think this may be a component messaging/delta problem — the values update visually in the component, but the Streamlit event loop never receives them.

Happy to share code snippets if helpful.

2

Welcome to the Streamlit community and thanks for the detailed question! :tada: You’re on the right track—this is a common challenge when using custom HTML/JS components with Streamlit. The root issue is that components.html only renders static HTML/JS and does not support sending data back to Python. To achieve two-way communication (e.g., capturing the selected address in Python), you must use a custom Streamlit Component created with components.declare_component, not components.html. This enables JavaScript to send data to Python via Streamlit’s messaging protocol.

To fix this, create a custom component folder with an index.html that uses the Google Places API and calls sendDataToPython when an address is selected. In your Python code, declare the component with components.declare_component and call it to receive the value. For example:

import streamlit as st
import streamlit.components.v1 as components

mycomponent = components.declare_component("mycomponent", path="./mycomponent")
value = mycomponent()
if value:
    st.write("Received:", value)

And in your index.html, use sendDataToPython to send the address object back to Python when a place is selected. This approach is shown in the official Streamlit custom component docs and community examples.

Sources:

3

Facing an issue @AgentStreamy :

”Your app is having trouble loading the components.google_address_autocomplete.component.google_autocomplete_component component.

If this is an installed component that works locally, the app may be having trouble accessing the component frontend assets due to network latency or proxy settings in your app deployment.”

My component is not an installed component but the one I created locally. I see the index.html working separately and I can read the path to the component html as well, but it is facing trouble loading onto my main app.py

Folder Structure:

Frontend
|– app.py

Components
|–google_autocomplete_component
|– init.py
|– component.py
|– frontend
|– index.html

I can give the codes if helpful! Thanks a lot!