-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
80 lines (68 loc) · 3.52 KB
/
index.html
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
79
80
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>2022 Data Days CLE Map</title>
<link rel="stylesheet" href="styles/main.css">
<script src="https://maps.googleapis.com/maps/api/js?key="YourKey"&libraries=places"></script>
</head>
<body onload="initMap()">
<div class="wrapper">
<div class="header">
<div id="logo" class="title">2022 Data Days CLE Map</div>
</div>
<div class="sidebar" style="overflow-y:scroll">
<script type="text/javascript">let submitted = false;</script>
<iframe name="hidden_iframe" id="hidden_iframe" style="display:none;" onload="if(submitted) {window.location.reload(true);}"></iframe>
<h2>Add a place to the map</h2>
<p>
Hello, thank you for checking out our 2022 Data Days map. <br><br>
This is a crowdsourced map for attendees' notable Cleveland places.
These places can be a place with a fond memory, a place you get lost, or a favorite place you frequent. <br><br>
Put a pin down, and check out the notable places from other Data Days attendees as well. <br><br>
Pins on the map are labeled as the following<br><br>
F = a favorite place<br>
M = a memorable place<br>
L = a place that's easy to get lost at
</p>
<form id="placeForm" method="post" action="https://docs.google.com/forms/u/0/d/e/1FAIpQLScKxwDh9TheIDBsAJGGF_OTzmyQ7pI-DyowI6aCNutj3y_zkA/formResponse"
target="hidden_iframe" onsubmit="submitted=true;">
<div class="book-input">
<label for="yourname" aria-describedby="yourname_desc">Your Name</label>
<div class="form-tip" id="yourname_desc">Note: This name will be public on the map.</div>
<input id="yourname" aria-label="Your Name" aria-describedby="yourname_desc" name="entry.1979636915" >
</div>
<div class="book-input">
<label for="nameOfPlace">Name of Place<span class="required"> *</span></label>
<input required id="nameOfPlace" aria-label="Name of Place" name="entry.216377468" required>
</div>
<div class="book-input">
<label for="categoryOfPlace">Category of Place <span class="required"> *</span> <br>(exactly as written: "lost", "memory", or "favorite")</label>
<input required id="categoryOfPlace" aria-label="Category of Place" name="entry.778829194" required>
</div>
<div class="book-input">
<label for="placeSignigicance">Briefly describe your experience with this place</label>
<input id="placeSignigicance" aria-label="Significance" name="entry.1754839197">
</div>
<div class="book-input">
<label for="location" aria-describedby="location_desc">Location<span class="required"> *</span></label>
<div class="form-tip" id="location_desc">Enter a country, province/state, city, address, or anywhere in the world!</div>
<input id="location" type="text" aria-label="Location" aria-describedby="location_desc" name="entry.994822026" required>
</div>
<div class="book-input">
<input id="latitude" name="entry.546868269" type="hidden">
</div>
<div class="book-input">
<input id="longitude" name="entry.1923638794" type="hidden">
</div>
<button id="submitBook">Submit</button>
</form>
</div>
<div class="body">
<div id="map_canvas"></div>
</div>
</div>
</body>
<script src="scripts/map.js"></script>
</html>