Google Place Autocomplete HTML Component

I am following the steps from Code snippet: create Components without any frontend tooling (no React, Babel, Webpack, etc) to create a html component.

In a folder mycomponent in parent directory I have created two files.
index.html :

    <!DOCTYPE html>
    <title>Place Autocomplete Example</title>
    <script src=""></script>

    <input id="autocomplete" placeholder="write here" />
  <input id="foo" placeholder="write here" style="width: 200px;" />


      function initAutocomplete() {
        var autocomplete = new google.maps.places.Autocomplete(

        autocomplete.addListener('place_changed', function () {
          var place = autocomplete.getPlace();
          var latitude =;
          var longitude = place.geometry.location.lng();

            value: latitude + "," + longitude,
            dataType: "json",

      google.maps.event.addDomListener(window, 'load', initAutocomplete);

      function sendDataToPython(data) {
        sendMessageToStreamlitClient("streamlit:setComponentValue", data);

      // ----------------------------------------------------
      // Just copy/paste these functions as-is:

      function sendMessageToStreamlitClient(type, data) {
        var outData = Object.assign({
          isStreamlitMessage: true,
          type: type,
        }, data);
        window.parent.postMessage(outData, "*");

      function init() {
        sendMessageToStreamlitClient("streamlit:componentReady", { apiVersion: 1 });

      function setFrameHeight(height) {
        sendMessageToStreamlitClient("streamlit:setFrameHeight", { height: height });

      // ----------------------------------------------------
      // Now modify this part of the code to fit your needs:

      // Hook things up!
      window.addEventListener("message", function (event) {
        if ( !== "streamlit:render") return;
        // Access values sent from Python here!

      // Hack to autoset the iframe height.
      window.addEventListener("load", function () {
        window.setTimeout(function () {
        }, 0);



import streamlit.components.v1 as components
mycomponent = components.declare_component(

Then in a streamlit page I write the following:

import streamlit as st
from mycomponent import mycomponent

# Use the component
value = mycomponent()

# Display the value
st.write("Received", value)

When I write something in the component field, it generates a autocomplete picklist below the top text field, appearing on top of the below text field that was embedded in the html component and if you select a value it generates the coordinates for that. It is really good but the problem arises from the fact that the picklist is rendered below the st.write("Received", value)
Screenshot 2024-03-04 at 3.43.38 PM

How to make the html component appear on top of streamlit elements and not only on top of html elements within the component?

I might be wrong but I don’t think that’s possible with the current way of implementing custom Components, simply because they are bound to an iframe that has a fixed height.