-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathiwOnOff.html
130 lines (117 loc) · 4.25 KB
/
iwOnOff.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
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>Can't close infoWindow</title>
<style type="text/css">
#map_canvas {
width: 1024px;
height: 512px;
border: 0px;
background: url('GMH/ajax-loader.gif') no-repeat;
background-position:center;
}
#mySneakyCanvas {
position: absolute;
top: 10px;
left: 600px;
width: 50px;
height: 50px;
}
</style>
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?sensor=false"></script>
<script type="text/javascript" src="./GMH/GMH.js"></script>
<script type="text/javascript">
var map;
var TILE_SIZE = 256;
var gmh;
function init() {
var whereAmI=new google.maps.LatLng(22.440099,114.064094);
var mapOptions = {
zoom: 16,
center: whereAmI,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var elm = document.getElementById('map_canvas');
map = new google.maps.Map(elm, mapOptions);
gmh=new GMH(map, elm);
gmh.addMarker(whereAmI, "KatHingWai");
console.log("marker added");
gmh.addInfoWindow(whereAmI, "吉慶圍<div class='tagada'>香港最靚嘅圍村<"+"/div>", "KatHingWaiIW");
console.log("infoWindow added");
google.maps.event.addListener(map, 'tilesloaded', function(){
console.log('map loaded');
gmh.findInfowindowEnclosingDiv("KatHingWaiIW");
});
}
function demo(name) {
var iw=gmh.infoWindows[name];
var e=iw.enclosingDIV;
var z=e.getElementsByTagName("img");
var i;
var step=5;
for(i=0;i<10;i++) {
var p=z[i].style.left.replace("px","")*1;
z[i++].style.left=(p+step)+"px";
step=step*-1;
}
}
function demo2() {
var img=gmh.staticMapIMG();
var div=document.getElementById('staticMap');
div.innerHTML='';
div.appendChild(img);
}
function demo3() {
gmh.scoutSprite("KatHingWai");
gmh.scoutSprite("KatHingWai");
}
function demo4() {
var x=gmh.nearestAirport(map.center);
var airport=x[0];
var distance=x[1];
alert("Nearest airport is "+airport.name+" ("+airport.iata+"), "+distance);
gmh.map.setCenter(new google.maps.LatLng(airport.lat, airport.lng));
}
function decorate() {
gmh.setInfowindowStyle("KatHingWaiIW", {"opacity":"0.6", "color":"blue", "fontSize":"22px", "font-family":"LiHei Pro", "background":"yellow", "border":"2px grey dotted", "-webkit-border-radius": "20px"});
gmh.setInfowindowStyle("KatHingWaiIW", {"color":"red", "fontSize":"18px", "textShadow": "0px 1px 0px #e1e1e8", "marginLeft":"10px", "marginTop":"2px", "overflow":"hidden"}, ".tagada");
var x=gmh.nearestAirport(map.center);
var airport=x[0];
var distance=x[1];
gmh.addTextIntoInfowindow("KatHingWaiIW", "<span style='font-size: 10px;'>Closest Airport is "+airport.iata+"<"+"/span>");
gmh.removeCloseBoxFromInfowindow("KatHingWaiIW");
gmh.slideInfowindowBy("KatHingWaiIW", 10, 20);
}
</script>
<style type="text/css">
.tagada {
font-size: 14px;
color: black;
margin: 2px;
font-family: 'LiHei Pro';
}
#myAddress:focus {
color: black;
}
#myAddress {
width: 200px;
color: grey;
}
</style>
</head><body onLoad="init();">
<div id="map_canvas"></div>
<input type='button' name='clickMe' value='remove [x]' onClick='gmh.removeCloseBoxFromInfowindow("KatHingWaiIW");' />
<input type='button' name='clickMeToo' value='restore [x]' onClick='gmh.restoreCloseBoxFromInfowindow("KatHingWaiIW");' />
<input type='button' name='clickMeThree' value='decorate' onClick='decorate();' />
<input type='button' name='demoLeg' value='try this too' onClick='demo("KatHingWaiIW");' />
<input type='button' name='staticMap' value='Static Map' onClick='demo2();' />
<input type='button' name='SpriteDude' value='Sprite Dude' onClick='demo3();demo3();' />
<input type='button' name='IcanFly' value='I Can Fly' onClick='gmh.goToAirport("JFK", "IATA");gmh.map.setZoom(12);' />
<input type='button' name='IcanFly2' value='I Can Fly Too' onClick='gmh.goToAirport("RPVR", "ICAO");gmh.map.setZoom(13);' />
<input type='button' name='na' value='nearest Airport' onClick='demo4();' /><br />
<input type='text' value='8 Finance Street Hong Kong' id='myAddress' />
<input type='button' name='getAddress' value='Get Address' onClick='gmh.addressToCoordinates(null, document.getElementById("myAddress").value, null, {doWhat:"MARKER", center: true, zoomLevel: 18});' />
<div id='staticMap'></div>
<canvas id='mySneakyCanvas'></canvas>
</body>
</html>