90 lines
2.2 KiB
HTML
90 lines
2.2 KiB
HTML
<html>
|
|
|
|
<head>
|
|
<title>Install Map</title>
|
|
<style>
|
|
body {
|
|
background-color: rgb(85, 85, 232);
|
|
}
|
|
|
|
h3 {
|
|
font-family: Calibri, sans-serif;
|
|
font-size: 28px;
|
|
padding: 0px 0px 0px 0px;
|
|
line-height: 50%;
|
|
text-align: center;
|
|
}
|
|
|
|
hr {
|
|
height: 10px;
|
|
border: 0px;
|
|
box-shadow: 0px 10px 10px -10px #8c8c8c inset;
|
|
color: black;
|
|
margin: -5px 10px -10px 10px;
|
|
}
|
|
|
|
p {
|
|
font-family: Calibri, sans-serif;
|
|
font-size: 18px;
|
|
color: DimGray;
|
|
padding: 0px 0px 0px 10px;
|
|
|
|
}
|
|
|
|
img {
|
|
vertical-align: middle;
|
|
margin: -10px 0px -10px 0px;
|
|
}
|
|
|
|
#container {
|
|
width: 100%;
|
|
height: 100%;
|
|
position: relative;
|
|
z-index: 0;
|
|
}
|
|
|
|
#legend {
|
|
font-family: sans-serif;
|
|
width: 260px;
|
|
height: 460px;
|
|
position: absolute;
|
|
z-index: 1;
|
|
top: 25px;
|
|
left: 25px;
|
|
border-style: solid;
|
|
border-color: rgb(85, 85, 232);
|
|
border-width: 5px;
|
|
background: white;
|
|
}
|
|
|
|
.map_canvas {
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
</style>
|
|
<script type="text/javascript" src=".\markers.js"></script>
|
|
<script type="text/javascript" src=".\map.js"></script>
|
|
<script async defer type="text/javascript"
|
|
src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCVSHBsNbXMdG-5DAEu3gSqO9-9dlQYOtc&loading=async&callback=initMap"></script>
|
|
</head>
|
|
|
|
<body>
|
|
<div id="container">
|
|
<div id="legend">
|
|
<h3>Legend</h3>
|
|
<hr>
|
|
<p id="blue"></p>
|
|
<p id="cyan"></p>
|
|
<p id="purple"></p>
|
|
<p id="green"></p>
|
|
<p id="orange"></p>
|
|
<p id="yellow"></p>
|
|
<p id="red"></p>
|
|
<p id="black"></p>
|
|
</div>
|
|
<div id="map_canvas" class="map_canvas"></div>
|
|
</div>
|
|
|
|
</body>
|
|
|
|
</html> |