bdGoogleMapsStreetViewImage/index.html at master · BarryDam/bdGoogleMapsStreetViewImage · 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
<!DOCTYPE html>
<html>
	<head>
		<style>
			html, body {
				height	: 100%;
				width	: 100%;
				margin	: 0px;
				padding	: 0px;

				display: -ms-flexbox;
				display: -webkit-flex;
				display: flex;

				-ms-flex-align: center;
				-webkit-align-items: center;
				-webkit-box-align: center;

				align-items: center;
				background-color : #e4e4e4;
			}
			.map {
				position: relative;
				width	: 640px;
				height	: 480px;
				border: 10px solid #fff;
				box-shadow: 2px 2px 10px rgba(0,0,0,0.5);
				margin : auto;
				background-color : #fff;
			}
		</style>

		<script src="https://maps.googleapis.com/maps/api/js?v=3"></script>
		<script src="//code.jquery.com/jquery-2.1.3.js"/></script>
		<script src="bdGoogleMapsStreetViewImage.js"></script>

	</head>
	<body>
		<div class="map"></div>
		<script>
			//var streetView = new bdGoogleMapsStreetViewImage({asdf:'asf'});

			$map = $('.map');
			$map.bdGoogleMapsStreetViewImage({
				ApiKey : 'AIzaSyAgiG2KOp-K6lk1vCIBSZszsEUyzdQABYc',
				panoid: '8CqJUoOFZCvJhExDHSbJ6g'
			});
			$map.on('ready.bd.googlemapsstreetviewimage',function(){
				console.log('klaar');
			});
			$map.on('link-changed.bd.googlemapsstreetviewimage',function(e, data){
				console.log('changes');
				console.log(data);
			});

			//$map.data('bdGoogleMapsStreetViewImage').setLatLng('51.188560','5.916000');


		</script>
	</body>
</html>