-
Notifications
You must be signed in to change notification settings - Fork 2
/
example.html
94 lines (83 loc) · 35.8 KB
/
example.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
<!DOCTYPE html>
<!-- saved from url=(0045)http://www.aivanf.com/static/gmt/example.html -->
<html lang="en"><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><style type="text/css">.gm-style .gm-style-mtc label,.gm-style .gm-style-mtc div{font-weight:400}</style><link type="text/css" rel="stylesheet" href="./example_files/css"><style type="text/css">.gm-style .gm-style-cc span,.gm-style .gm-style-cc a,.gm-style .gm-style-mtc div{font-size:10px}</style><style type="text/css">@media print { .gm-style .gmnoprint, .gmnoprint { display:none }}@media screen { .gm-style .gmnoscreen, .gmnoscreen { display:none }}</style>
<title>GMapsTable - AivanF.</title>
<meta name="description" content="Usage example of GMapsTable library for dynamic tables overlay on Google Maps by AivanF, Barashev Ivan">
<meta name="keywords" content="Google Maps,AivanF,GMapsTable,Barashev Ivan,javascript">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no">
<!-- just for page beautiness -->
<link rel="stylesheet" href="./example_files/bootstrap.min.css">
<script src="./example_files/jquery.min.js"></script>
<script src="./example_files/bootstrap.min.js"></script>
<!-- Google Maps JS. Always use your own key! -->
<script src="./example_files/js"></script>
<!-- sandbox data for the table -->
<script src="./example_files/data.js"></script>
<!-- GMapsTable lib -->
<script src="./example_files/gmapstable.js"></script>
<!-- page proccessing script -->
<script src="./example_files/example.js"></script>
<style>
/* Always set the map height explicitly to define the size of the div
* element that contains the map. */
#map {
height: 100%;
}
/* Optional: make the page fill the window */
html, body {
height: 100%;
width: 100%;
max-width: 100%;
margin: 0;
padding: 0;
}
.loader-small {
border: 4px solid #f3f3f3;
border-top: 6px solid #337abb;
border-radius: 50%;
width: 24px;
height: 24px;
animation: spin 2s linear infinite;
margin-left: auto;
margin-right: auto;
}
@keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
#floating-panel {
position: absolute;
top: 10px;
left: 40%;
z-index: 5;
background-color: #fff;
padding: 5px;
border: 1px solid #999;
text-align: center;
font-family: 'Roboto', 'sans-serif';
line-height: 30px;
padding-left: 10px;
}
</style>
<script type="text/javascript" charset="UTF-8" src="./example_files/common.js"></script><script type="text/javascript" charset="UTF-8" src="./example_files/map.js"></script><style type="text/css">.gm-style {
font: 400 11px Roboto, Arial, sans-serif;
text-decoration: none;
}
.gm-style img { max-width: none; }</style><script type="text/javascript" charset="UTF-8" src="./example_files/util.js"></script><script type="text/javascript" charset="UTF-8" src="./example_files/onion.js"></script><script type="text/javascript" charset="UTF-8" src="./example_files/ViewportInfoService.GetViewportInfo"></script><script type="text/javascript" charset="UTF-8" src="./example_files/controls.js"></script><script type="text/javascript" charset="UTF-8" src="./example_files/marker.js"></script><script type="text/javascript" charset="UTF-8" src="./example_files/vt"></script><script type="text/javascript" charset="UTF-8" src="./example_files/vt(1)"></script><script type="text/javascript" charset="UTF-8" src="./example_files/AuthenticationService.Authenticate"></script><script type="text/javascript" charset="UTF-8" src="./example_files/overlay.js"></script><script type="text/javascript" charset="UTF-8" src="./example_files/stats.js"></script><script type="text/javascript" charset="UTF-8" src="./example_files/QuotaService.RecordEvent"></script></head>
<!-- Disable selecting -->
<body style="-moz-user-select: none; -webkit-user-select: none; -ms-user-select:none; user-select:none;-o-user-select:none;" unselectable="on" onselectstart="return false;" onmousedown="return false;">
<div id="floating-panel">
<table style="width: 100%">
<tbody><tr>
<td><a href="http://www.aivanf.com/" style="float: left" class="btn btn-link" role="button">Home</a></td>
<td colspan="2"><b>GMapsTable</b>, Barashev Ivan 2017</td>
</tr>
<tr>
<td>Scale: <span id="scaler">10</span></td>
<td><div class="loader-small" style="display: none;"></div></td>
<td><button type="button" class="btn btn-primary" id="btnupdate">Update</button></td>
</tr>
</tbody></table>
</div>
<div id="map" style="position: relative; overflow: hidden;"><div style="height: 100%; width: 100%; position: absolute; top: 0px; left: 0px; background-color: rgb(229, 227, 223);"><div class="gm-style" style="position: absolute; z-index: 0; left: 0px; top: 0px; height: 100%; width: 100%; padding: 0px; border-width: 0px; margin: 0px;"><div style="position: absolute; z-index: 0; left: 0px; top: 0px; height: 100%; width: 100%; padding: 0px; border-width: 0px; margin: 0px; cursor: url("https://maps.gstatic.com/mapfiles/openhand_8_8.cur") 8 8, default;"><div style="z-index: 1; position: absolute; top: 0px; left: 0px; width: 100%; transform-origin: 0px 0px 0px; transform: matrix(1, 0, 0, 1, 0, 0);"><div style="position: absolute; left: 0px; top: 0px; z-index: 100; width: 100%;"><div style="position: absolute; left: 0px; top: 0px; z-index: 0;"><div aria-hidden="true" style="position: absolute; left: 0px; top: 0px; z-index: 1; visibility: inherit;"><div style="width: 256px; height: 256px; position: absolute; left: 592px; top: 119px;"></div><div style="width: 256px; height: 256px; position: absolute; left: 592px; top: 375px;"></div><div style="width: 256px; height: 256px; position: absolute; left: 336px; top: 119px;"></div><div style="width: 256px; height: 256px; position: absolute; left: 336px; top: 375px;"></div><div style="width: 256px; height: 256px; position: absolute; left: 848px; top: 119px;"></div><div style="width: 256px; height: 256px; position: absolute; left: 848px; top: 375px;"></div><div style="width: 256px; height: 256px; position: absolute; left: 592px; top: 631px;"></div><div style="width: 256px; height: 256px; position: absolute; left: 592px; top: -137px;"></div><div style="width: 256px; height: 256px; position: absolute; left: 336px; top: -137px;"></div><div style="width: 256px; height: 256px; position: absolute; left: 336px; top: 631px;"></div><div style="width: 256px; height: 256px; position: absolute; left: 848px; top: -137px;"></div><div style="width: 256px; height: 256px; position: absolute; left: 848px; top: 631px;"></div><div style="width: 256px; height: 256px; position: absolute; left: 1104px; top: 375px;"></div><div style="width: 256px; height: 256px; position: absolute; left: 80px; top: 119px;"></div><div style="width: 256px; height: 256px; position: absolute; left: 1104px; top: 119px;"></div><div style="width: 256px; height: 256px; position: absolute; left: 80px; top: 375px;"></div><div style="width: 256px; height: 256px; position: absolute; left: 1104px; top: -137px;"></div><div style="width: 256px; height: 256px; position: absolute; left: 80px; top: -137px;"></div><div style="width: 256px; height: 256px; position: absolute; left: 80px; top: 631px;"></div><div style="width: 256px; height: 256px; position: absolute; left: 1104px; top: 631px;"></div><div style="width: 256px; height: 256px; position: absolute; left: -176px; top: 375px;"></div><div style="width: 256px; height: 256px; position: absolute; left: 1360px; top: 375px;"></div><div style="width: 256px; height: 256px; position: absolute; left: 1360px; top: 119px;"></div><div style="width: 256px; height: 256px; position: absolute; left: -176px; top: 119px;"></div><div style="width: 256px; height: 256px; position: absolute; left: 1360px; top: -137px;"></div><div style="width: 256px; height: 256px; position: absolute; left: -176px; top: -137px;"></div><div style="width: 256px; height: 256px; position: absolute; left: -176px; top: 631px;"></div><div style="width: 256px; height: 256px; position: absolute; left: 1360px; top: 631px;"></div></div></div></div><div style="position: absolute; left: 0px; top: 0px; z-index: 101; width: 100%;"></div><div style="position: absolute; left: 0px; top: 0px; z-index: 102; width: 100%;"></div><div style="position: absolute; left: 0px; top: 0px; z-index: 103; width: 100%;"><div style="position: absolute; left: 0px; top: 0px; z-index: -1;"><div aria-hidden="true" style="position: absolute; left: 0px; top: 0px; z-index: 1; visibility: inherit;"><div style="width: 256px; height: 256px; overflow: hidden; position: absolute; left: 592px; top: 119px;"></div><div style="width: 256px; height: 256px; overflow: hidden; position: absolute; left: 592px; top: 375px;"></div><div style="width: 256px; height: 256px; overflow: hidden; position: absolute; left: 336px; top: 119px;"></div><div style="width: 256px; height: 256px; overflow: hidden; position: absolute; left: 336px; top: 375px;"></div><div style="width: 256px; height: 256px; overflow: hidden; position: absolute; left: 848px; top: 119px;"></div><div style="width: 256px; height: 256px; overflow: hidden; position: absolute; left: 848px; top: 375px;"></div><div style="width: 256px; height: 256px; overflow: hidden; position: absolute; left: 592px; top: 631px;"></div><div style="width: 256px; height: 256px; overflow: hidden; position: absolute; left: 592px; top: -137px;"></div><div style="width: 256px; height: 256px; overflow: hidden; position: absolute; left: 336px; top: -137px;"></div><div style="width: 256px; height: 256px; overflow: hidden; position: absolute; left: 336px; top: 631px;"></div><div style="width: 256px; height: 256px; overflow: hidden; position: absolute; left: 848px; top: -137px;"></div><div style="width: 256px; height: 256px; overflow: hidden; position: absolute; left: 848px; top: 631px;"></div><div style="width: 256px; height: 256px; overflow: hidden; position: absolute; left: 1104px; top: 375px;"></div><div style="width: 256px; height: 256px; overflow: hidden; position: absolute; left: 80px; top: 119px;"></div><div style="width: 256px; height: 256px; overflow: hidden; position: absolute; left: 1104px; top: 119px;"></div><div style="width: 256px; height: 256px; overflow: hidden; position: absolute; left: 80px; top: 375px;"></div><div style="width: 256px; height: 256px; overflow: hidden; position: absolute; left: 1104px; top: -137px;"></div><div style="width: 256px; height: 256px; overflow: hidden; position: absolute; left: 80px; top: -137px;"></div><div style="width: 256px; height: 256px; overflow: hidden; position: absolute; left: 80px; top: 631px;"></div><div style="width: 256px; height: 256px; overflow: hidden; position: absolute; left: 1104px; top: 631px;"></div><div style="width: 256px; height: 256px; overflow: hidden; position: absolute; left: -176px; top: 375px;"></div><div style="width: 256px; height: 256px; overflow: hidden; position: absolute; left: 1360px; top: 375px;"></div><div style="width: 256px; height: 256px; overflow: hidden; position: absolute; left: 1360px; top: 119px;"></div><div style="width: 256px; height: 256px; overflow: hidden; position: absolute; left: -176px; top: 119px;"></div><div style="width: 256px; height: 256px; overflow: hidden; position: absolute; left: 1360px; top: -137px;"></div><div style="width: 256px; height: 256px; overflow: hidden; position: absolute; left: -176px; top: -137px;"></div><div style="width: 256px; height: 256px; overflow: hidden; position: absolute; left: -176px; top: 631px;"></div><div style="width: 256px; height: 256px; overflow: hidden; position: absolute; left: 1360px; top: 631px;"></div></div></div></div><div style="position: absolute; left: 0px; top: 0px; z-index: 0;"><div aria-hidden="true" style="position: absolute; left: 0px; top: 0px; z-index: 1; visibility: inherit;"><div style="position: absolute; left: 592px; top: 119px; transition: opacity 200ms ease-out;"><img src="./example_files/vt(2)" draggable="false" alt="" style="width: 256px; height: 256px; user-select: none; border: 0px; padding: 0px; margin: 0px; max-width: none;"></div><div style="position: absolute; left: 336px; top: -137px; transition: opacity 200ms ease-out;"><img src="./example_files/vt(3)" draggable="false" alt="" style="width: 256px; height: 256px; user-select: none; border: 0px; padding: 0px; margin: 0px; max-width: none;"></div><div style="position: absolute; left: 848px; top: 375px; transition: opacity 200ms ease-out;"><img src="./example_files/vt(4)" draggable="false" alt="" style="width: 256px; height: 256px; user-select: none; border: 0px; padding: 0px; margin: 0px; max-width: none;"></div><div style="position: absolute; left: -176px; top: 375px; transition: opacity 200ms ease-out;"><img src="./example_files/vt(5)" draggable="false" alt="" style="width: 256px; height: 256px; user-select: none; border: 0px; padding: 0px; margin: 0px; max-width: none;"></div><div style="position: absolute; left: 1360px; top: 375px; transition: opacity 200ms ease-out;"><img src="./example_files/vt(6)" draggable="false" alt="" style="width: 256px; height: 256px; user-select: none; border: 0px; padding: 0px; margin: 0px; max-width: none;"></div><div style="position: absolute; left: 592px; top: 375px; transition: opacity 200ms ease-out;"><img src="./example_files/vt(7)" draggable="false" alt="" style="width: 256px; height: 256px; user-select: none; border: 0px; padding: 0px; margin: 0px; max-width: none;"></div><div style="position: absolute; left: 1360px; top: 631px; transition: opacity 200ms ease-out;"><img src="./example_files/vt(8)" draggable="false" alt="" style="width: 256px; height: 256px; user-select: none; border: 0px; padding: 0px; margin: 0px; max-width: none;"></div><div style="position: absolute; left: -176px; top: 631px; transition: opacity 200ms ease-out;"><img src="./example_files/vt(9)" draggable="false" alt="" style="width: 256px; height: 256px; user-select: none; border: 0px; padding: 0px; margin: 0px; max-width: none;"></div><div style="position: absolute; left: -176px; top: -137px; transition: opacity 200ms ease-out;"><img src="./example_files/vt(10)" draggable="false" alt="" style="width: 256px; height: 256px; user-select: none; border: 0px; padding: 0px; margin: 0px; max-width: none;"></div><div style="position: absolute; left: 1360px; top: -137px; transition: opacity 200ms ease-out;"><img src="./example_files/vt(11)" draggable="false" alt="" style="width: 256px; height: 256px; user-select: none; border: 0px; padding: 0px; margin: 0px; max-width: none;"></div><div style="position: absolute; left: -176px; top: 119px; transition: opacity 200ms ease-out;"><img src="./example_files/vt(12)" draggable="false" alt="" style="width: 256px; height: 256px; user-select: none; border: 0px; padding: 0px; margin: 0px; max-width: none;"></div><div style="position: absolute; left: 1360px; top: 119px; transition: opacity 200ms ease-out;"><img src="./example_files/vt(13)" draggable="false" alt="" style="width: 256px; height: 256px; user-select: none; border: 0px; padding: 0px; margin: 0px; max-width: none;"></div><div style="position: absolute; left: 80px; top: -137px; transition: opacity 200ms ease-out;"><img src="./example_files/vt(14)" draggable="false" alt="" style="width: 256px; height: 256px; user-select: none; border: 0px; padding: 0px; margin: 0px; max-width: none;"></div><div style="position: absolute; left: 1104px; top: -137px; transition: opacity 200ms ease-out;"><img src="./example_files/vt(15)" draggable="false" alt="" style="width: 256px; height: 256px; user-select: none; border: 0px; padding: 0px; margin: 0px; max-width: none;"></div><div style="position: absolute; left: 80px; top: 375px; transition: opacity 200ms ease-out;"><img src="./example_files/vt(16)" draggable="false" alt="" style="width: 256px; height: 256px; user-select: none; border: 0px; padding: 0px; margin: 0px; max-width: none;"></div><div style="position: absolute; left: 336px; top: 119px; transition: opacity 200ms ease-out;"><img src="./example_files/vt(17)" draggable="false" alt="" style="width: 256px; height: 256px; user-select: none; border: 0px; padding: 0px; margin: 0px; max-width: none;"></div><div style="position: absolute; left: 336px; top: 375px; transition: opacity 200ms ease-out;"><img src="./example_files/vt(18)" draggable="false" alt="" style="width: 256px; height: 256px; user-select: none; border: 0px; padding: 0px; margin: 0px; max-width: none;"></div><div style="position: absolute; left: 592px; top: 631px; transition: opacity 200ms ease-out;"><img src="./example_files/vt(19)" draggable="false" alt="" style="width: 256px; height: 256px; user-select: none; border: 0px; padding: 0px; margin: 0px; max-width: none;"></div><div style="position: absolute; left: 848px; top: 119px; transition: opacity 200ms ease-out;"><img src="./example_files/vt(20)" draggable="false" alt="" style="width: 256px; height: 256px; user-select: none; border: 0px; padding: 0px; margin: 0px; max-width: none;"></div><div style="position: absolute; left: 848px; top: 631px; transition: opacity 200ms ease-out;"><img src="./example_files/vt(21)" draggable="false" alt="" style="width: 256px; height: 256px; user-select: none; border: 0px; padding: 0px; margin: 0px; max-width: none;"></div><div style="position: absolute; left: 592px; top: -137px; transition: opacity 200ms ease-out;"><img src="./example_files/vt(22)" draggable="false" alt="" style="width: 256px; height: 256px; user-select: none; border: 0px; padding: 0px; margin: 0px; max-width: none;"></div><div style="position: absolute; left: 848px; top: -137px; transition: opacity 200ms ease-out;"><img src="./example_files/vt(23)" draggable="false" alt="" style="width: 256px; height: 256px; user-select: none; border: 0px; padding: 0px; margin: 0px; max-width: none;"></div><div style="position: absolute; left: 336px; top: 631px; transition: opacity 200ms ease-out;"><img src="./example_files/vt(24)" draggable="false" alt="" style="width: 256px; height: 256px; user-select: none; border: 0px; padding: 0px; margin: 0px; max-width: none;"></div><div style="position: absolute; left: 1104px; top: 631px; transition: opacity 200ms ease-out;"><img src="./example_files/vt(25)" draggable="false" alt="" style="width: 256px; height: 256px; user-select: none; border: 0px; padding: 0px; margin: 0px; max-width: none;"></div><div style="position: absolute; left: 80px; top: 631px; transition: opacity 200ms ease-out;"><img src="./example_files/vt(26)" draggable="false" alt="" style="width: 256px; height: 256px; user-select: none; border: 0px; padding: 0px; margin: 0px; max-width: none;"></div><div style="position: absolute; left: 1104px; top: 119px; transition: opacity 200ms ease-out;"><img src="./example_files/vt(27)" draggable="false" alt="" style="width: 256px; height: 256px; user-select: none; border: 0px; padding: 0px; margin: 0px; max-width: none;"></div><div style="position: absolute; left: 80px; top: 119px; transition: opacity 200ms ease-out;"><img src="./example_files/vt(28)" draggable="false" alt="" style="width: 256px; height: 256px; user-select: none; border: 0px; padding: 0px; margin: 0px; max-width: none;"></div><div style="position: absolute; left: 1104px; top: 375px; transition: opacity 200ms ease-out;"><img src="./example_files/vt(29)" draggable="false" alt="" style="width: 256px; height: 256px; user-select: none; border: 0px; padding: 0px; margin: 0px; max-width: none;"></div></div></div></div><div style="z-index: 2; position: absolute; height: 100%; width: 100%; padding: 0px; border-width: 0px; margin: 0px; left: 0px; top: 0px;"></div><div style="z-index: 3; position: absolute; height: 100%; width: 100%; padding: 0px; border-width: 0px; margin: 0px; left: 0px; top: 0px;"><div style="z-index: 1; position: absolute; height: 100%; width: 100%; padding: 0px; border-width: 0px; margin: 0px; left: 0px; top: 0px;"></div></div><div style="z-index: 4; position: absolute; top: 0px; left: 0px; width: 100%; transform-origin: 0px 0px 0px; transform: matrix(1, 0, 0, 1, 0, 0);"><div style="position: absolute; left: 0px; top: 0px; z-index: 104; width: 100%;"><div style="border: 0px none; position: absolute; left: 568.107px; top: 359.83px; width: 691.769px; height: 321.817px;"><table style="table-layout: fixed; text-align: center; overflow-y: hidden; color: black; width: 691.769px; height: 321.817px;"><tr><td></td><td style="border: 1px solid rgb(119, 153, 187); background: rgba(127, 159, 255, 0.04);">384</td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr><tr><td style="border: 1px solid rgb(119, 153, 187); background: rgba(127, 159, 255, 0.424);">4095</td><td style="border: 1px solid rgb(119, 153, 187); background: rgba(127, 159, 255, 0.075);">727</td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr><tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr><tr><td></td><td></td><td style="border: 1px solid rgb(119, 153, 187); background: rgba(127, 159, 255, 0.055);">516</td><td style="border: 1px solid rgb(119, 153, 187); background: rgba(127, 159, 255, 0.41);">3957</td><td></td><td style="border: 1px solid rgb(119, 153, 187); background: rgba(127, 159, 255, 0.8);">7704</td><td style="border: 1px solid rgb(119, 153, 187); background: rgba(127, 159, 255, 0.004);">19</td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td style="border: 1px solid rgb(119, 153, 187); background: rgba(127, 159, 255, 0);">17</td></tr><tr><td></td><td></td><td></td><td style="border: 1px solid rgb(119, 153, 187); background: rgba(127, 159, 255, 0.043);">410</td><td></td><td style="border: 1px solid rgb(119, 153, 187); background: rgba(127, 159, 255, 0.016);">141</td><td style="border: 1px solid rgb(119, 153, 187); background: rgba(127, 159, 255, 0.008);">63</td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td style="border: 1px solid rgb(119, 153, 187); background: rgba(127, 159, 255, 0.173);">1644</td></tr></table></div></div><div style="position: absolute; left: 0px; top: 0px; z-index: 105; width: 100%;"></div><div style="position: absolute; left: 0px; top: 0px; z-index: 106; width: 100%;"></div><div style="position: absolute; left: 0px; top: 0px; z-index: 107; width: 100%;"></div></div></div><div style="margin-left: 5px; margin-right: 5px; z-index: 1000000; position: absolute; left: 0px; bottom: 0px;"><a target="_blank" href="https://maps.google.com/maps?ll=55.789788,37.6173&z=9&t=m&hl=ru-RU&gl=US&mapclient=apiv3" title="Нажмите, чтобы отобразить эту область в Картах Google" style="position: static; overflow: visible; float: none; display: inline;"><div style="width: 66px; height: 26px; cursor: pointer;"><img src="./example_files/google4.png" draggable="false" style="position: absolute; left: 0px; top: 0px; width: 66px; height: 26px; user-select: none; border: 0px; padding: 0px; margin: 0px;"></div></a></div><div style="background-color: white; padding: 15px 21px; border: 1px solid rgb(171, 171, 171); font-family: Roboto, Arial, sans-serif; color: rgb(34, 34, 34); box-shadow: rgba(0, 0, 0, 0.2) 0px 4px 16px; z-index: 10000002; display: none; width: 256px; height: 148px; position: absolute; left: 570px; top: 276px;"><div style="padding: 0px 0px 10px; font-size: 16px;">Картографические данные</div><div style="font-size: 13px;">Картографические данные © 2017 Google</div><div style="width: 13px; height: 13px; overflow: hidden; position: absolute; opacity: 0.7; right: 12px; top: 12px; z-index: 10000; cursor: pointer;"><img src="./example_files/mapcnt6.png" draggable="false" style="position: absolute; left: -2px; top: -336px; width: 59px; height: 492px; user-select: none; border: 0px; padding: 0px; margin: 0px; max-width: none;"></div></div><div class="gmnoprint" style="z-index: 1000001; position: absolute; right: 280px; bottom: 0px; width: 208px;"><div draggable="false" class="gm-style-cc" style="user-select: none; height: 14px; line-height: 14px;"><div style="opacity: 0.7; width: 100%; height: 100%; position: absolute;"><div style="width: 1px;"></div><div style="background-color: rgb(245, 245, 245); width: auto; height: 100%; margin-left: 1px;"></div></div><div style="position: relative; padding-right: 6px; padding-left: 6px; font-family: Roboto, Arial, sans-serif; font-size: 10px; color: rgb(68, 68, 68); white-space: nowrap; direction: ltr; text-align: right; vertical-align: middle; display: inline-block;"><a style="color: rgb(68, 68, 68); text-decoration: none; cursor: pointer; display: none;">Картографические данные</a><span style="">Картографические данные © 2017 Google</span></div></div></div><div class="gmnoscreen" style="position: absolute; right: 0px; bottom: 0px;"><div style="font-family: Roboto, Arial, sans-serif; font-size: 11px; color: rgb(68, 68, 68); direction: ltr; text-align: right; background-color: rgb(245, 245, 245);">Картографические данные © 2017 Google</div></div><div class="gmnoprint gm-style-cc" draggable="false" style="z-index: 1000001; user-select: none; height: 14px; line-height: 14px; position: absolute; right: 153px; bottom: 0px;"><div style="opacity: 0.7; width: 100%; height: 100%; position: absolute;"><div style="width: 1px;"></div><div style="background-color: rgb(245, 245, 245); width: auto; height: 100%; margin-left: 1px;"></div></div><div style="position: relative; padding-right: 6px; padding-left: 6px; font-family: Roboto, Arial, sans-serif; font-size: 10px; color: rgb(68, 68, 68); white-space: nowrap; direction: ltr; text-align: right; vertical-align: middle; display: inline-block;"><a href="https://www.google.com/intl/ru-RU_US/help/terms_maps.html" target="_blank" style="text-decoration: none; cursor: pointer; color: rgb(68, 68, 68);">Условия использования</a></div></div><div style="cursor: pointer; width: 25px; height: 25px; overflow: hidden; display: none; margin: 10px 14px; position: absolute; top: 0px; right: 0px;"><img src="./example_files/sv9.png" draggable="false" class="gm-fullscreen-control" style="position: absolute; left: -52px; top: -86px; width: 164px; height: 175px; user-select: none; border: 0px; padding: 0px; margin: 0px;"></div><div draggable="false" class="gm-style-cc" style="user-select: none; height: 14px; line-height: 14px; position: absolute; right: 0px; bottom: 0px;"><div style="opacity: 0.7; width: 100%; height: 100%; position: absolute;"><div style="width: 1px;"></div><div style="background-color: rgb(245, 245, 245); width: auto; height: 100%; margin-left: 1px;"></div></div><div style="position: relative; padding-right: 6px; padding-left: 6px; font-family: Roboto, Arial, sans-serif; font-size: 10px; color: rgb(68, 68, 68); white-space: nowrap; direction: ltr; text-align: right; vertical-align: middle; display: inline-block;"><a target="_new" title="Сообщить об ошибке на карте или снимке" href="https://www.google.com/maps/@55.7897875,37.6173,9z/data=!10m1!1e1!12b1?source=apiv3&rapsrc=apiv3" style="font-family: Roboto, Arial, sans-serif; font-size: 10px; color: rgb(68, 68, 68); text-decoration: none; position: relative;">Сообщить об ошибке на карте</a></div></div><div class="gmnoprint gm-bundled-control gm-bundled-control-on-bottom" draggable="false" controlwidth="28" controlheight="93" style="margin: 10px; user-select: none; position: absolute; bottom: 107px; right: 28px;"><div class="gmnoprint" controlwidth="28" controlheight="55" style="position: absolute; left: 0px; top: 38px;"><div draggable="false" style="user-select: none; box-shadow: rgba(0, 0, 0, 0.3) 0px 1px 4px -1px; border-radius: 2px; cursor: pointer; background-color: rgb(255, 255, 255); width: 28px; height: 55px;"><div title="Увеличить" style="position: relative; width: 28px; height: 27px; left: 0px; top: 0px;"><div style="overflow: hidden; position: absolute; width: 15px; height: 15px; left: 7px; top: 6px;"><img src="./example_files/tmapctrl.png" draggable="false" style="position: absolute; left: 0px; top: 0px; user-select: none; border: 0px; padding: 0px; margin: 0px; max-width: none; width: 120px; height: 54px;"></div></div><div style="position: relative; overflow: hidden; width: 67%; height: 1px; left: 16%; background-color: rgb(230, 230, 230); top: 0px;"></div><div title="Уменьшить" style="position: relative; width: 28px; height: 27px; left: 0px; top: 0px;"><div style="overflow: hidden; position: absolute; width: 15px; height: 15px; left: 7px; top: 6px;"><img src="./example_files/tmapctrl.png" draggable="false" style="position: absolute; left: 0px; top: -15px; user-select: none; border: 0px; padding: 0px; margin: 0px; max-width: none; width: 120px; height: 54px;"></div></div></div></div><div class="gm-svpc" controlwidth="28" controlheight="28" style="background-color: rgb(255, 255, 255); box-shadow: rgba(0, 0, 0, 0.3) 0px 1px 4px -1px; border-radius: 2px; width: 28px; height: 28px; cursor: url("https://maps.gstatic.com/mapfiles/openhand_8_8.cur") 8 8, default; position: absolute; left: 0px; top: 0px;"><div style="position: absolute; left: 1px; top: 1px;"></div><div style="position: absolute; left: 1px; top: 1px;"><div aria-label="Перейти в режим просмотра улиц" style="width: 26px; height: 26px; overflow: hidden; position: absolute; left: 0px; top: 0px;"><img src="./example_files/cb_scout5.png" draggable="false" style="position: absolute; left: -147px; top: -26px; width: 215px; height: 835px; user-select: none; border: 0px; padding: 0px; margin: 0px; max-width: none;"></div><div aria-label="Человечек находится над картой" style="width: 26px; height: 26px; overflow: hidden; position: absolute; left: 0px; top: 0px; visibility: hidden;"><img src="./example_files/cb_scout5.png" draggable="false" style="position: absolute; left: -147px; top: -52px; width: 215px; height: 835px; user-select: none; border: 0px; padding: 0px; margin: 0px; max-width: none;"></div><div aria-label="Перейти в режим просмотра улиц" style="width: 26px; height: 26px; overflow: hidden; position: absolute; left: 0px; top: 0px; visibility: hidden;"><img src="./example_files/cb_scout5.png" draggable="false" style="position: absolute; left: -147px; top: -78px; width: 215px; height: 835px; user-select: none; border: 0px; padding: 0px; margin: 0px; max-width: none;"></div></div></div><div class="gmnoprint" controlwidth="28" controlheight="0" style="display: none; position: absolute;"><div title="Повернуть карту на 90 градусов" style="width: 28px; height: 28px; overflow: hidden; position: absolute; border-radius: 2px; box-shadow: rgba(0, 0, 0, 0.3) 0px 1px 4px -1px; cursor: pointer; background-color: rgb(255, 255, 255); display: none;"><img src="./example_files/tmapctrl4.png" draggable="false" style="position: absolute; left: -141px; top: 6px; width: 170px; height: 54px; user-select: none; border: 0px; padding: 0px; margin: 0px; max-width: none;"></div><div class="gm-tilt" style="width: 28px; height: 28px; overflow: hidden; position: absolute; border-radius: 2px; box-shadow: rgba(0, 0, 0, 0.3) 0px 1px 4px -1px; top: 0px; cursor: pointer; background-color: rgb(255, 255, 255);"><img src="./example_files/tmapctrl4.png" draggable="false" style="position: absolute; left: -141px; top: -13px; width: 170px; height: 54px; user-select: none; border: 0px; padding: 0px; margin: 0px; max-width: none;"></div></div></div><div class="gmnoprint" style="margin: 10px; z-index: 0; position: absolute; cursor: pointer; left: 0px; top: 0px;"><div class="gm-style-mtc" style="float: left;"><div draggable="false" title="Показать карту с названиями объектов" style="direction: ltr; overflow: hidden; text-align: center; position: relative; color: rgb(0, 0, 0); font-family: Roboto, Arial, sans-serif; user-select: none; font-size: 11px; background-color: rgb(255, 255, 255); padding: 8px; border-bottom-left-radius: 2px; border-top-left-radius: 2px; -webkit-background-clip: padding-box; background-clip: padding-box; box-shadow: rgba(0, 0, 0, 0.3) 0px 1px 4px -1px; min-width: 30px; font-weight: 500;">Карта</div><div style="background-color: white; z-index: -1; padding: 2px; border-bottom-left-radius: 2px; border-bottom-right-radius: 2px; box-shadow: rgba(0, 0, 0, 0.3) 0px 1px 4px -1px; position: absolute; left: 0px; top: 29px; text-align: left; display: none;"><div draggable="false" title="Показать карту рельефа с названиями объектов" style="color: rgb(0, 0, 0); font-family: Roboto, Arial, sans-serif; user-select: none; font-size: 11px; background-color: rgb(255, 255, 255); padding: 6px 8px 6px 6px; direction: ltr; text-align: left; white-space: nowrap;"><span role="checkbox" style="box-sizing: border-box; position: relative; line-height: 0; font-size: 0px; margin: 0px 5px 0px 0px; display: inline-block; background-color: rgb(255, 255, 255); border: 1px solid rgb(198, 198, 198); border-radius: 1px; width: 13px; height: 13px; vertical-align: middle;"><div style="position: absolute; left: 1px; top: -2px; width: 13px; height: 11px; overflow: hidden; display: none;"><img src="./example_files/imgs8.png" draggable="false" style="position: absolute; left: -52px; top: -44px; user-select: none; border: 0px; padding: 0px; margin: 0px; max-width: none; width: 68px; height: 67px;"></div></span><label style="vertical-align: middle; cursor: pointer;">Рельеф</label></div></div></div><div class="gm-style-mtc" style="float: left;"><div draggable="false" title="Показать спутниковую карту" style="direction: ltr; overflow: hidden; text-align: center; position: relative; color: rgb(86, 86, 86); font-family: Roboto, Arial, sans-serif; user-select: none; font-size: 11px; background-color: rgb(255, 255, 255); padding: 8px; border-bottom-right-radius: 2px; border-top-right-radius: 2px; -webkit-background-clip: padding-box; background-clip: padding-box; box-shadow: rgba(0, 0, 0, 0.3) 0px 1px 4px -1px; border-left: 0px; min-width: 43px;">Спутник</div><div style="background-color: white; z-index: -1; padding: 2px; border-bottom-left-radius: 2px; border-bottom-right-radius: 2px; box-shadow: rgba(0, 0, 0, 0.3) 0px 1px 4px -1px; position: absolute; right: 0px; top: 29px; text-align: left; display: none;"><div draggable="false" title="Показать спутниковую карту с названиями объектов" style="color: rgb(0, 0, 0); font-family: Roboto, Arial, sans-serif; user-select: none; font-size: 11px; background-color: rgb(255, 255, 255); padding: 6px 8px 6px 6px; direction: ltr; text-align: left; white-space: nowrap;"><span role="checkbox" style="box-sizing: border-box; position: relative; line-height: 0; font-size: 0px; margin: 0px 5px 0px 0px; display: inline-block; background-color: rgb(255, 255, 255); border: 1px solid rgb(198, 198, 198); border-radius: 1px; width: 13px; height: 13px; vertical-align: middle;"><div style="position: absolute; left: 1px; top: -2px; width: 13px; height: 11px; overflow: hidden;"><img src="./example_files/imgs8.png" draggable="false" style="position: absolute; left: -52px; top: -44px; user-select: none; border: 0px; padding: 0px; margin: 0px; max-width: none; width: 68px; height: 67px;"></div></span><label style="vertical-align: middle; cursor: pointer;">Названия объектов</label></div></div></div></div></div></div></div>
</body></html>