File size: 1,688 Bytes
857c0ad e8391e2 30c1835 e8391e2 f3e752c e8391e2 30c1835 e8391e2 30c1835 e8391e2 30c1835 be7ca7e 30c1835 e8391e2 be7ca7e 30c1835 be7ca7e e8391e2 |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 |
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()
|