File size: 2,857 Bytes
d3854a7
7d1cb79
d3854a7
 
 
7d1cb79
 
 
 
 
d3854a7
7d1cb79
 
 
 
 
 
 
 
d3854a7
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
7d1cb79
 
 
 
 
 
 
d3854a7
7d1cb79
d3854a7
7d1cb79
 
d3854a7
 
 
 
 
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
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
gmaps = googlemaps.Client(key='AIzaSyDybq2mxujekZVivmr03Y5-GGHXesn4TLI')
import streamlit as st
import streamlit.components.v1 as components
import googlemaps
import os
from datetime import datetime

def get_directions(source, destination):
    now = datetime.now()
    directions_info = {}
    modes = ['driving', 'walking', 'bicycling', 'transit']
    for mode in modes:
        directions_result = gmaps.directions(source, destination, mode=mode, departure_time=now)
        if directions_result:
            directions_info[mode] = directions_result[0]['legs'][0]['steps']
        else:
            directions_info[mode] = "No available routes."
    return directions_info

def show_map(source, destination):
    html_code = f"""
    <html>
    <head>
        <script src="https://maps.googleapis.com/maps/api/js?key={os.getenv('GOOGLE_KEY')}&callback=initMap" async defer></script>
        <script>
        var map;
        function initMap() {{
            var directionsService = new google.maps.DirectionsService();
            var directionsRenderer = new google.maps.DirectionsRenderer();
            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>
    </head>
    <body onload="initMap()">
        <div id="map" style="height: 500px;"></div>
    </body>
    </html>
    """
    components.html(html_code, height=600, scrolling=False)

# Initialize Google Maps
gmaps = googlemaps.Client(key=os.getenv('GOOGLE_KEY'))

# Streamlit app
st.title('🗺️ Google Maps Directions')
st.sidebar.header('📌 User Input Features')

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)
    for mode, directions in directions_info.items():
        st.write(f"## Directions by {mode.capitalize()} 🛣️")
        if directions == "No available routes.":
            st.write("❌ " + directions)
        else:
            for i, step in enumerate(directions):
                st.write(f"👣 {i + 1}. {step['html_instructions']}")

    show_map_button = st.button('Show Directions on Map 🗺️')
    if show_map_button:
        show_map(source_location, destination_location)