-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
110 lines (100 loc) · 3.93 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
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
<!DOCTYPE html>
<html>
<head>
<meta content="text/html;charset=utf-8" http-equiv="Content-Type">
<meta content="utf-8" http-equiv="encoding">
<style>
#map {
height: 400px;
width: 100%;
}
#spreadsheet {
height: 400px;
width: 100%;
}
</style>
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script type="text/javascript">
// https://stackoverflow.com/questions/32496382/typeerror-window-initmap-is-not-a-function
// TypeError: window.initMap is not a function
function initMap() {} // now it IS a function and it is in global
$(() => {
// Initialize and add the map
initMap = function() {
mapOptions = {
zoom: 11,
center: new google.maps.LatLng(41.2565, -95.9345)
};
map = new google.maps.Map(document.getElementById('map'), mapOptions);
$.getJSON(
"https://sheets.googleapis.com/v4/spreadsheets/1oXNON82hX5gCWbjtJ-18VFEDvfpiYjKisGkvd_CwFqU/values/A2:Z100?key=AIzaSyAh8ROGiLWyWx62qZR860eQa_wD_BIk0ag",
function(data) {
$(data.values).each(function() {
title = this[0];
address = this[1];
type = this[2];
date = this[3];
frequency = this[4];
time = this[5];
details = this[6];
position = {
lat: parseFloat(parseFloat(this[7])),
lng: parseFloat(parseFloat(this[8]))
};
url = this[9];
marker = new google.maps.Marker({
position: position,
map: map,
title: title,
});
infowindow = new google.maps.InfoWindow({
content: "Content String"
});
$('#sheet_in_html > tbody:last-child').append(
'<tr>' +
'<td>A</td>' +
'<td>' + title + '</td>' +
'<td>' + address + '</td>' +
'</tr>'
);
google.maps.event.addListener(marker, 'click', function() {
infowindow.setContent(
'<div>'+
'<p><strong>' + ((title === undefined) ? title : ('<a href="' + url +'">' + title + '</a>')) + '</strong></p>' +
((type === undefined) ? "" : ('<p><strong>Type: </strong>' + type + '</p>')) +
((date === undefined) ? "" : ('<p><strong>Day of Week: </strong>' + date + '</p>')) +
((frequency === undefined) ? "" : ('<p><strong>Frequency: </strong>' + frequency + '</p>')) +
((time === undefined) ? "" : ('<p><strong>Time: </strong>' + time + '</p>')) +
((details === undefined) ? "" : ('<p><strong>Information: </strong>' + details + '</p>')) +
'</div>'
);
infowindow.open(map, marker);
});
return marker;
});
}
);
};
});
</script>
<script async defer src="https://maps.googleapis.com/maps/api/js?key=AIzaSyAh8ROGiLWyWx62qZR860eQa_wD_BIk0ag&callback=initMap" type="text/javascript"></script>
</head>
<body>
<h3>Free Food Map</h3>
<div id="map"></div>
<table id="sheet_in_html">
<tbody>
<tr>
<th>ID</th>
<th>Title</th>
<th>Address</th>
</tr>
</tbody>
</table>
<iframe id="spreadsheet" src="https://docs.google.com/spreadsheets/d/e/2PACX-1vToIJP_U8FzOMG0Z-0_bQjvMlePoulSaZHKUq9r1r7ALBh3qltLipGqYNpMte1auIb16SLXhMKs4lZF/pubhtml?widget=true&headers=false"></iframe>
<h4>Other Resources</h4>
<ul>
<li><a href="http://foodnetlincoln.org/distribution-site-map/">FoodNet site map</a> (Lincoln, Nebraska)
</ul>
</body>
</html>