-
Notifications
You must be signed in to change notification settings - Fork 0
/
Maps.html
102 lines (82 loc) · 3.38 KB
/
Maps.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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Bus Performance</title>
<style>
#map {
height: 600px;
width: 100%;
}
</style>
</head>
<body>
<h1>Bus Performance</h1>
<div id="map"></div>
<script>
function initMap() {
var options = {
zoom: 8,
center: { lat: 43.1566, lng: -77.6088 }
}
var map = new google.maps.Map(document.getElementById('map'), options);
// listeners
google.maps.event.addListener(map, 'click',
function(event){
addMarker({coords:event.latLng});
});
var stations = [{ coords: { lat: 43.158300, lng: -77.608200 }, content: '<h1> Regional Transit Service</h1>' }, { coords: { lat: 43.161170, lng: -77.574608 }, content: '<h1> Lift Line </h1>' },
{ coords: { lat: 42.985043, lng: -78.157499 }, content: '<h1> Batavia Bus Service</h1>' }, { coords: { lat: 42.732838, lng: -77.829647 }, content: '<h1> Livingston Area Transportation Service </h1>' },
{ coords: { lat: 42.807093, lng: -76.845991 }, content: '<h1> Seneca Transit Service</h1>' }, { coords: { lat: 43.064072, lng: -77.037483 }, content: '<h1> Wayne Area Transportation Service</h1>' },
{ coords: { lat: 43.239668, lng: -78.198688 }, content: '<h1> Orleans Transit Service</h1>' }, { coords: { lat: 43.161164, lng: -77.574487 }, content: '<h1> RTS Access</h1>' },
{ coords: { lat: 43.161192, lng: -77.574844 }, content: '<h1> RTS Genesee</h1>' }, { coords: { lat: 42.732826, lng: -77.829552 }, content: '<h1> RTS Livingston</h1>' },
{ coords: { lat: 42.887882, lng: -77.219001 }, content: '<h1> RTS Ontario</h1>' }, { coords: { lat: 43.239667, lng: -78.198695 }, content: '<h1> RTS Orleans</h1>' },
{ coords: { lat: 42.807100, lng: -76.846021 }, content: '<h1> RTS Seneca</h1>' }, { coords: { lat: 43.064079, lng: -77.037547 }, content: '<h1> RTS Wayne</h1>' }];
function makeGreenCircle(props) {
var circle = new google.maps.Circle({
map: map,
center: props.coords,
radius: 8000,
strokeColor: "green",
fillColor: "green",
strokeWeight: 0
});
}
function makeRedCircle(props) {
var circle = new google.maps.Circle({
map: map,
center: props.coords,
radius: 8000,
strokeColor: "red",
fillColor: "red",
strokeWeight: 0
});
}
for (var i = 0; i < stations.length; i++) {
makeRedCircle(stations[i]);
}
function addMarker(props) {
var marker = new google.maps.Marker({
position: props.coords,
map: map
});
if(props.content) {
var popWin = new google.maps.InfoWindow({
content: props.content
});
}
}
for (var i = 0; i < stations.length; i++) {
addMarker(stations[i]);
}
}
</script>
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCsHyb04RHJXSRZx4earnJBjKw7YCtJ5-0&callback=initMap"
async defer></script>
<meta charset=utf-8>
<a href="/my-link/">Click me</a>
<a href="/january/">January</a>
</body>
</html>