virtual_tours/map.html at master · kicohen/virtual_tours · 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
<!DOCTYPE html>
<html>
<head>
	<!-- Title and Meta Data -->
	<title>CMU Tours</title>
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<!-- Stylesheets -->
	<link rel="stylesheet" type="text/css" href="assets/css/style.css">
	<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
	<!-- Font -->
	<link href="https://fonts.googleapis.com/css?family=Roboto:100,300,400" rel="stylesheet">
</head>
<body>

<!-- Navbar -->
<nav>
	<div id="logo">
		<img src="assets/img/CMU_Logo_Horiz_Red.png">
	</div>
	<div id="nav-icon" onclick="toggleNav()">
	  <span></span>
	  <span></span>
	  <span></span>
	  <span></span>
	</div>
</nav>


<!-- Nav overlay -->
<div id="myNav" class="overlay">
  <div class="overlay-content">
    <a href="destinations.html">Destinations</a>
    <hr>
    <a href="about.html">About</a>
    <hr>
    <a href="map.html">Where am I?</a>
    <hr>
    <a href="contact.html">Contact</a>
  </div>
</div>

<!-- Page Content -->
<style type="text/css">
	#map{
		width: 100%;
		height: 100vh;
	}
</style>
<main>
	<div id="map"></div>
</main>

</body>

<!-- JQuery -->
<script src="https://code.jquery.com/jquery-3.2.1.js" integrity="sha256-DZAnKJ/6XZ9si04Hgrsxu/8s717jcIzLy3oi35EouyE=" crossorigin="anonymous"></script>
<!-- Bootstrap -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<!-- Website Javascript -->
<script type="text/javascript" src="assets/js/functionality.js"></script>
<!-- Page Specific Javascript -->
<script>
function getLocation() {
    if (navigator.geolocation) {
        navigator.geolocation.getCurrentPosition(myMap, showError);
    } else {
        x.innerHTML = "Geolocation is not supported by this browser.";
    }
}

function myMap(position) {
var myLatLng = {lat: position.coords.latitude, lng: position.coords.longitude};
var theMallMarker = new google.maps.LatLng(parseFloat(40.441807),parseFloat(-79.944069));
var theFenceMarker = new google.maps.LatLng(parseFloat(40.442261),parseFloat(-79.943431));
var pauschBridgeMarker = new google.maps.LatLng(parseFloat(40.443232),parseFloat(-79.944121));
// var image = "http://www.stlouisscottierescue.com/Scottie_sill_trans.gif";
var map = new google.maps.Map(document.getElementById('map'), {
          center: {lat: position.coords.latitude, lng: position.coords.longitude},
          zoom: 17,
          mapTypeControlOptions: {
            mapTypeIds: ['satellite']
          }
        });

var image = {
    url: "http://www.stlouisscottierescue.com/Scottie_sill_trans.gif", // url
    scaledSize: new google.maps.Size(50, 50), // scaled size
    origin: new google.maps.Point(0,0), // origin
    anchor: new google.maps.Point(25, 25) // anchor
};

var marker = new google.maps.Marker({
          position: myLatLng,
          map: map,
          title: 'Current Location',
          icon: image
        });
var theMall = new google.maps.Marker({
          position: theMallMarker,
          map: map,
          title: 'The Mall'
        });
var theFence = new google.maps.Marker({
		  position: theFenceMarker,
		  map: map,
		  title: 'The Fence'
		});
var pauschBridge = new google.maps.Marker({
		  position: pauschBridgeMarker,
		  map: map,
		  title: 'The Pausch Bridge'
})
}
</script>
<!-- Google Maps API -->
<script async defer src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBcW3Bs3eY07QCJj3_yR7p0ISiyPxg3mz0&callback=getLocation"
  type="text/javascript"></script>
</html>