Google Places API for autocomplete and fetching values in python variables

Using Streamlit
,
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: