app.py

import streamlit as st

def main():
    st.title("Advanced Google Maps Integration in Streamlit")

    # Enable session state
    st.session_state.lat = None
    st.session_state.lng = None

    # Set initial location to New York City
    initial_location = (40.7128, -74.0060)

    # Display Google Map with a location picker using HTML and JavaScript
    st.write("Pick a location on the map:")
    map_code = f"""
        <iframe
            id="map"
            width="800"
            height="500"
            frameborder="0"
            scrolling="no"
            marginheight="0"
            marginwidth="0"
            src="https://maps.google.com/maps?q={initial_location[0]},{initial_location[1]}&z=15&output=embed"
            onclick="captureLatLng(event)"
        ></iframe>
        <p id="selected-coordinates">Selected Coordinates: </p>
        <script>
            function captureLatLng(event) {{
                var lat = event.latLng.lat();
                var lng = event.latLng.lng();
                var message = 'Selected Coordinates: ' + lat + ', ' + lng;
                document.getElementById('selected-coordinates').innerHTML = message;
                Streamlit.setSessionState({{ lat: lat, lng: lng }});
            }}
        </script>
    """
    st.components.v1.html(map_code, height=600, scrolling=True)

    # Get the selected coordinates from the session state
    selected_coordinates = st.session_state.lat, st.session_state.lng
    if selected_coordinates[0] is not None and selected_coordinates[1] is not None:
        st.write(f"Selected Coordinates: {selected_coordinates[0]}, {selected_coordinates[1]}")

if __name__ == "__main__":
    main()