-
Notifications
You must be signed in to change notification settings - Fork 1
/
index_honza.html
107 lines (92 loc) · 3.27 KB
/
index_honza.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
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<style type="text/css">
html { height: 100% }
body { height: 100%; margin: 0; padding: 0 }
#map_canvas { height: 100% }
#photo-panel {
background: #fff;
padding: 5px;
overflow-y: auto;
overflow-x: hidden;
width: 300px;
max-height: 300px;
font-size: 14px;
font-family: Arial;
border: 1px solid #ccc;
box-shadow: -2px 2px 2px rgba(33, 33, 33, 0.4);
display: none;
}
#wapiblock .panoramio-wapi-images {
background-color: white;
}
#wapiblock .panoramio-wapi-tos {
background-color: white !important;
}
</style>
<script type="text/javascript"
src="https://maps.googleapis.com/maps/api/js?key=AIzaSyB6rECnUtSIQA1EGyP6LKatsBY2-sDFIgk&sensor=true">
</script>
<script type="text/javascript" src="http://www.panoramio.com/wapi/wapi.js?v=1"></script>
<script src="https://maps.googleapis.com/maps/api/js?libraries=panoramio&sensor=false"></script>
<script type="text/javascript">
function initialize() {
var bigBen = new google.maps.LatLng(51.500782, -0.124669);
var lat = bigBen.lat();
var lng = bigBen.lng();
var mapOptions = {
center: bigBen,
zoom: 17,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("map_canvas"),
mapOptions);
var panoramioLayer = new google.maps.panoramio.PanoramioLayer();
panoramioLayer.setMap(map);
var tag = document.getElementById('tag');
var value="Big Ben"
var button = document.getElementById('filter-button');
panoramioLayer.setTag(tag.value);
var photoDiv = document.getElementById('photoPanel');
map.controls[google.maps.ControlPosition.RIGHT_TOP].push(photoPanel);
map.controls[google.maps.ControlPosition.TOP].push(
document.getElementById('filter'));
google.maps.event.addListener(panoramioLayer, 'click', function(photo) {
var li = document.createElement('li');
var link = document.createElement('a');
link.innerHTML = photo.featureDetails.title + ': ' +
photo.featureDetails.author;
link.setAttribute('href', photo.featureDetails.url);
li.appendChild(link);
photoPanel.appendChild(li);
photoPanel.style.display = 'block';
});
google.maps.event.addDomListener(window, 'load', initialize);
}
</script>
</head>
<body onload="initialize()">
<ul id="photo-panel">
<li><strong>Photos clicked</strong></li>
</ul>
<div id="filter">
<input id="tag" value="Big Ben">
<button id="filter-button">Filter on Tag</button>
</div>
<div id="map_canvas" style="width:100%; height:100%"></div>
//-------------------------------------------------------
<div id="wapiblock"></div>
<script type="text/javascript">
var place = 'london eye';
var myWidget = new panoramio.PhotoWidget('wapiblock', {'tag': place}, myOptions);
myWidget.setPosition(0);
var myOptions = {
'width': 300,
'height': 200
};
</script>
//------------------------------------------------------
</body>
</html>