Hugging Face's logo

Spaces:
awacke1
/
Streamlit-Google-Maps-California
Runtime error

App Files Community
awacke1 commited on
Commit
03a899a
•
1 Parent(s): ca4f05f

Update app.py

Browse files
Files changed (1) hide show
  1. app.py +42 -43
app.py CHANGED
@@ -1,16 +1,13 @@
1
- import googlemaps
2
  import streamlit as st
3
- import json
 
4
  import os
5
  from datetime import datetime
6
 
7
- key=os.getenv('GOOGLE_KEY')
8
- gmaps = googlemaps.Client(key)
9
-
10
  def get_directions(source, destination):
11
  now = datetime.now()
12
- modes = ['driving', 'walking', 'bicycling', 'transit']
13
  directions_info = {}
 
14
  for mode in modes:
15
  directions_result = gmaps.directions(source, destination, mode=mode, departure_time=now)
16
  if directions_result:
@@ -19,38 +16,45 @@ def get_directions(source, destination):
19
  directions_info[mode] = "No available routes."
20
  return directions_info
21
 
22
- # Function to generate the Google Map HTML
23
- def generate_map(source, destination):
24
- map_code = f"""
25
- <div id="map" style="height: 400px; width: 100%;"></div>
26
- <script>
27
- function initMap() {{
28
- var directionsService = new google.maps.DirectionsService();
29
- var directionsRenderer = new google.maps.DirectionsRenderer();
30
- var map = new google.maps.Map(document.getElementById('map'), {{
31
- zoom: 7,
32
- center: {{lat: 41.85, lng: -87.65}}
33
- }});
34
- directionsRenderer.setMap(map);
35
-
36
- var request = {{
37
- origin: '{source}',
38
- destination: '{destination}',
39
- travelMode: 'DRIVING'
40
- }};
41
- directionsService.route(request, function(result, status) {{
42
- if (status == 'OK') {{
43
- directionsRenderer.setDirections(result);
44
- }}
45
- }});
46
- }}
47
- </script>
48
- <script src="https://maps.googleapis.com/maps/api/js?key=Your-Google-Maps-API-Key&callback=initMap" async defer></script>
 
 
 
 
49
  """
50
- return map_code
51
 
52
- # Streamlit App
53
- st.title("🗺️ Google Maps Directions")
 
 
 
54
  st.sidebar.header('User Input Features')
55
 
56
  source_location = st.sidebar.text_input("Source Location", "Mound, MN")
@@ -58,18 +62,13 @@ destination_location = st.sidebar.text_input("Destination Location", "Minneapoli
58
 
59
  if st.sidebar.button('Get Directions'):
60
  directions_info = get_directions(source_location, destination_location)
61
-
62
- # Displaying the directions in text
63
  for mode, directions in directions_info.items():
64
  st.write(f"## Directions by {mode.capitalize()}")
65
  if directions == "No available routes.":
66
  st.write(directions)
67
  else:
68
  for i, step in enumerate(directions):
69
- st.write(f"{i+1}. {step['html_instructions']}")
70
 
71
- # Show Directions on Map Button
72
  if st.sidebar.button('Show Directions on Map'):
73
- # Embed the Google Map HTML
74
- map_code = generate_map(source_location, destination_location)
75
- st.markdown(map_code, unsafe_allow_html=True)
 
 
1
  import streamlit as st
2
+ import streamlit.components.v1 as components
3
+ import googlemaps
4
  import os
5
  from datetime import datetime
6
 
 
 
 
7
  def get_directions(source, destination):
8
  now = datetime.now()
 
9
  directions_info = {}
10
+ modes = ['driving', 'walking', 'bicycling', 'transit']
11
  for mode in modes:
12
  directions_result = gmaps.directions(source, destination, mode=mode, departure_time=now)
13
  if directions_result:
 
16
  directions_info[mode] = "No available routes."
17
  return directions_info
18
 
19
+ def show_map(source, destination):
20
+ html_code = f"""
21
+ <html>
22
+ <head>
23
+ <script src="https://maps.googleapis.com/maps/api/js?key={os.getenv('GOOGLE_KEY')}"></script>
24
+ <script>
25
+ function initMap() {{
26
+ var directionsService = new google.maps.DirectionsService();
27
+ var directionsRenderer = new google.maps.DirectionsRenderer();
28
+ var map = new google.maps.Map(document.getElementById('map'), {{
29
+ zoom: 7,
30
+ center: {{lat: 41.85, lng: -87.65}}
31
+ }});
32
+ directionsRenderer.setMap(map);
33
+ var request = {{
34
+ origin: '{source}',
35
+ destination: '{destination}',
36
+ travelMode: 'DRIVING'
37
+ }};
38
+ directionsService.route(request, function(result, status) {{
39
+ if (status == 'OK') {{
40
+ directionsRenderer.setDirections(result);
41
+ }}
42
+ }});
43
+ }}
44
+ </script>
45
+ </head>
46
+ <body onload="initMap()">
47
+ <div id="map" style="height: 500px;"></div>
48
+ </body>
49
+ </html>
50
  """
51
+ components.html(html_code, height=600)
52
 
53
+ # Initialize Google Maps
54
+ gmaps = googlemaps.Client(key=os.getenv('GOOGLE_KEY'))
55
+
56
+ # Streamlit app
57
+ st.title('🗺️ Google Maps Directions')
58
  st.sidebar.header('User Input Features')
59
 
60
  source_location = st.sidebar.text_input("Source Location", "Mound, MN")
 
62
 
63
  if st.sidebar.button('Get Directions'):
64
  directions_info = get_directions(source_location, destination_location)
 
 
65
  for mode, directions in directions_info.items():
66
  st.write(f"## Directions by {mode.capitalize()}")
67
  if directions == "No available routes.":
68
  st.write(directions)
69
  else:
70
  for i, step in enumerate(directions):
71
+ st.write(f"{i + 1}. {step['html_instructions']}")
72
 
 
73
  if st.sidebar.button('Show Directions on Map'):
74
+ show_map(source_location, destination_location)