Update app.py

app.py

@@ -1,5 +1,6 @@
 import googlemaps
 import streamlit as st
+import json
 from datetime import datetime
 
 key=os.getenv('GOOGLE_KEY')
@@ -7,7 +8,6 @@ gmaps = googlemaps.Client(key)
 
 def get_directions(source, destination):
     now = datetime.now()
-    # Get all modes: driving, walking, bicycling, and transit
     modes = ['driving', 'walking', 'bicycling', 'transit']
     directions_info = {}
     for mode in modes:
@@ -18,18 +18,47 @@ def get_directions(source, destination):
             directions_info[mode] = "No available routes."
     return directions_info
 
+# Function to generate the Google Map HTML
+def generate_map(source, destination):
+    map_code = f"""
+    <div id="map" style="height: 400px; width: 100%;"></div>
+    <script>
+      function initMap() {{
+        var directionsService = new google.maps.DirectionsService();
+        var directionsRenderer = new google.maps.DirectionsRenderer();
+        var map = new google.maps.Map(document.getElementById('map'), {{
+          zoom: 7,
+          center: {{lat: 41.85, lng: -87.65}}
+        }});
+        directionsRenderer.setMap(map);
+
+        var request = {{
+          origin: '{source}',
+          destination: '{destination}',
+          travelMode: 'DRIVING'
+        }};
+        directionsService.route(request, function(result, status) {{
+          if (status == 'OK') {{
+            directionsRenderer.setDirections(result);
+          }}
+        }});
+      }}
+    </script>
+    <script src="https://maps.googleapis.com/maps/api/js?key=Your-Google-Maps-API-Key&callback=initMap" async defer></script>
+    """
+    return map_code
+
 # Streamlit App
 st.title("🗺️ Google Maps Directions")
 st.sidebar.header('User Input Features')
 
-# Input for source and destination
 source_location = st.sidebar.text_input("Source Location", "Mound, MN")
 destination_location = st.sidebar.text_input("Destination Location", "Minneapolis, MN")
 
 if st.sidebar.button('Get Directions'):
     directions_info = get_directions(source_location, destination_location)
-    
-    # Displaying the directions
+
+    # Displaying the directions in text
     for mode, directions in directions_info.items():
         st.write(f"## Directions by {mode.capitalize()}")
         if directions == "No available routes.":
@@ -38,3 +67,8 @@ if st.sidebar.button('Get Directions'):
             for i, step in enumerate(directions):
                 st.write(f"{i+1}. {step['html_instructions']}")
 
+    # Show Directions on Map Button
+    if st.sidebar.button('Show Directions on Map'):
+        # Embed the Google Map HTML
+        map_code = generate_map(source_location, destination_location)
+        st.markdown(map_code, unsafe_allow_html=True)