-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathfood-truck-map.html
110 lines (103 loc) · 3.23 KB
/
food-truck-map.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
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
#map {
height: 400pt;
width: 60%;
float: left;
}
@media(min-width: 960px) {
#map {
width: 60%;
}
}
@media(max-width: 960px) {
#map {
width: 100%;
}
}
</style>
</head>
<body>
<p>
<strong>T</strong> - The Dog House<br>
<strong>S</strong> - School of Fish<br>
<strong>R</strong> - Roaming Bowl<br>
<strong>H</strong> - Hungry Nomad<br>
<strong>I</strong> - It's About Thai<br>
</p>
<div id="map"></div>
<script type="text/javascript">
var map;
function initMap() {
// To embed in general, create a div with ID and replace 'map' with ID
// and include the contents of this script tag as well as the maps script below
map = new google.maps.Map(document.getElementById('map'), {
center: {lat: 49.25987, lng: -123.2429},
zoom: 14
});
var markers = [];
var infoWindows = [];
var foodTrucks;
var index = 0;
var http = new XMLHttpRequest();
http.open("GET", "http://ubyssey-food-truck-map-server.herokuapp.com", true);
http.send();
http.onreadystatechange = function() {
if(this.readyState == 4 && this.status == 200) {
foodTrucks = JSON.parse(this.responseText);
for(index in foodTrucks) {
createInfoWindow(foodTrucks[index], index);
}
}
}
function createInfoWindow(foodTruck, index) {
// Create the marker and attach to the map
markers[index] = new google.maps.Marker({
map: map,
position: new google.maps.LatLng(foodTruck.lat, foodTruck.lng),
title: foodTruck.name,
label: foodTruck.name,
index: index,
animation: google.maps.Animation.DROP,
infoWindowVisible: false
});
// Title, blurb & link to appear in an info window
var infoWindowString =
"<img src=\"" + "http://ubyssey-food-truck-map-server.herokuapp.com" + foodTruck.image + "\" alt=\"" + foodTruck.name + "\" style=\"margin: auto;width: 50\">" +
"<br>" +
"<h2>" + foodTruck.name + "</h2>" +
"<p>" + foodTruck.blurb + "</p>" +
"<p><a href=\"" + foodTruck.url + "\">More information</a></p>";
// Create the info-window
infoWindows[index] = new google.maps.InfoWindow({
content: infoWindowString,
maxWidth: 300
});
// Open the info-window when the particular marker is clicked
markers[index].addListener('click', function() {
// If the info-window isn't visible, display it on click
if(this.infoWindowVisible == false) {
infoWindows[this.index].open(map, markers[this.index]);
this.infoWindowVisible = true;
}
// If the info-window is visible, hide it on click
else {
infoWindows[this.index].close();
this.infoWindowVisible = false;
}
// Close all other windows
for(var i = 0; i < foodTrucks.length; i++) {
if(i != this.index) {
infoWindows[i].close();
}
}
});
}
}
</script>
<script async defer src="https://maps.googleapis.com/maps/api/js?key=AIzaSyA6qDsjeYmGJYS0fqLruWL71uarRcBjtCg&callback=initMap">
</script>
</body>
</html>