record-stores/map.html at master · ghcarterray/record-stores · GitHub

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
111
112
113
114
115
116
117
118
119
120
121
122
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
	<head>
		<meta charset="UTF-8"/>
		<link href="Layout.css" rel="stylesheet" type="text/css" />
		<link href="content.css" rel="stylesheet" type="text/css" />
		<title>Vinyl Record Shop Finder</title>
		<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBXhpB1BViRs742KtD1gSwqmv2eqHUpLqQ&libraries=places&sensor=false"></script>
		<script type="text/javascript">
			var map;
			var service;
			function init() {
				var defaultLocation = new google.maps.LatLng(38.985978, -76.942564);
				var mapOptions = {
					zoom: 11,
					mapTypeId: google.maps.MapTypeId.ROADMAP
				};
				map = new google.maps.Map(document.getElementById("mapCanvas"), mapOptions);
				if(navigator.geolocation){
					navigator.geolocation.watchPosition(showPosition, locationError);
				}
				else{
					alert("Geolocation Not Supported On This Device");
					return;
				}
			}

			function showPosition(pos) {
				lat = pos.coords.latitude;
				lng = pos.coords.longitude;
				currentLocation = new google.maps.LatLng(lat, lng);
				map.setCenter(currentLocation);
				var infowindow = new google.maps.InfoWindow({
					map: map,
					position: currentLocation,
					content: "You are Here!"
				});
				searchShops(currentLocation);
			}
			function locationError(error){
				var content;
				switch(error.code){
					case error.PERMISSION_DENIED:
						alert("Geolocation Access Denied");
						break;
					case error.POSITION_UNAVAILABLE:
						alert("Geolocation is not available");
						break;
					case error.TIMEOUT:
						alert("Timeout to get Geolocation");
						break;
					default:
						alert("Unknown Geolocation Error");
						break;
					}
				var defaultLocation = new google.maps.LatLng(38.985978, -76.942564);
				var options = {
					map: map,
					position: defaultLocation,
					content: 'University of Maryland College Park'
				};
				var infowindow = new google.maps.InfoWindow(options);
				map.setCenter(options.position);
				searchShops(defaultLocation);
			}

			function searchShops(currentLocation){
				var request = {
				    location: currentLocation,
				    radius: '50000',
				    query: 'record store'
				  };
				service = new google.maps.places.PlacesService(map);
  				service.textSearch(request, callback);
			}
			function callback(results, status){
			  if (status == google.maps.places.PlacesServiceStatus.OK) {
			    for (var i = 0; i < results.length; i++) {
			      var place = results[i];
			      createMarker(place);
			    }
			  }
			}
			function createMarker(place){
				var marker = new google.maps.Marker({
      				position: place.geometry.location,
      				map: map,
      				title: place.name + ',' + place.formatted_address
      			});

			}

			google.maps.event.addDomListener(window, 'load', init);
		</script>
	</head>
	<body>
		<div id="container">
			<div id="header">
				<h1>Where's The Wax?</h1>
			</div>
			<div id="nav">
				<a href="home.html">Home</a>
				<a href="stores.html">Stores</a>
				<a href="map.html">Map</a>
				<a href="new_store.html">New Store</a>
				<a href="mailing_list.html">Mailing List</a>
				<a href="contact.html">Contact Us</a>
			</div>
			<div id="content">
				<fieldset>
					<legend><h2>Here Are Some Shops Near You</h2></legend>
					<div id="mapCanvas"></div>
				</fieldset>
			</div>

			<div id="footer">
				<p>&copy; Carter Ray</p><img src="Images/logo-powered-by-google.gif" />
			</div>
		</div>
	</body>
</html>