-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathAerialRotation.html
75 lines (71 loc) · 2.63 KB
/
AerialRotation.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
<!--
###########################
Rotating 45 degree Imagery
###########################
The 45 degree imagery actually consists of collection of images for each cardinal direction
(North, South, East and West). Once your map is displaying 45 degree imagery, you can orient
the imagery towards one of its cardinal directions by calling setHeading() on the Map
object, passing a number value expressed as degrees from North.
-->
<!DOCTYPE html>
<html lang="en">
<head>
<title>Aerial Rotation Map Example (45 degreee Imagery Rotation)</title>
<meta name="viewport" content="initial-scale=1.0">
<meta charset="UTF-8">
<style type="text/css">
/* Always set the map height explicitly to define the size of div element that
contains the map
*/
#map {
height: 100%;
}
/* Optional: Makes the sample page fill the window. */
html, body {
height: 100%;
margin: 0;
padding: 0;
}
#floating-panel {
position: absolute;
top: 10px;
left: 25%;
z-index: 5;
background-color: #ffffff;
padding: 5px;
border: 1px solid #999999;
text-align: center;
font-family: 'Roboto', 'sans-serif';
line-height: 30px;
padding-left: 10px;
}
</style>
</head>
<body>
<div id="floating-panel"><input type="button" value="Auto Rotate" onclick="autoRotate();" /></div>
<div id="map"></div>
<script type="text/javascript">
var map;
function initMap() {
map = new google.maps.Map(document.getElementById('map'), {
center: {lat: 45.518, lng: -122.672},
zoom: 18,
mapTypeId: 'satellite',
heading: 90,
tilt: 45
});
}
function rotate90() {
var heading = map.getHeading() || 0;
map.setHeading(heading + 90);
}
function autoRotate() {
// determine if we are showing aerial imagery
if (map.getTilt() !== 0) {
window.setInterval(rotate90, 3000);
}
}
</script>
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCgncHE9VhehCiKENUJB0y19GURax6WXqk&callback=initMap" async defer></script>
</body>
</html>