forked from DrJam/gmaps-radius
-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
75 lines (60 loc) · 3.83 KB
/
index.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
<!doctype html>
<!--[if lt IE 7 ]> <html lang="en" class="no-js ie6"> <![endif]-->
<!--[if IE 7 ]> <html lang="en" class="no-js ie7"> <![endif]-->
<!--[if IE 8 ]> <html lang="en" class="no-js ie8"> <![endif]-->
<!--[if IE 9 ]> <html lang="en" class="no-js ie9"> <![endif]-->
<!--[if (gt IE 9)|!(IE)]><!--> <html lang="en" class="no-js"> <!--<![endif]-->
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>Draw radius circles on a map</title>
<meta name="Description" content="Simple tool to draw circles of a given radius on top of a Google Map." />
<meta name="author" content="Oliver Beattie" />
<meta name="viewport" content="width=device-width, user-scalable=no" />
<meta name="robots" content="NOODP" />
<link rel="stylesheet" type="text/css" href="https://fonts.googleapis.com/css?family=Roboto:500,400" />
<link rel="stylesheet" type="text/css" href="./static/build/style/style.css" />
</head>
<body>
<div id="map"></div>
<form id="options">
<label for="radiusInput">Radius</label> <input type="number" value="5" min="0" id="radiusInput" name="radiusInput" autofocus />
<label for="unitSelector">Units</label> <select id="unitSelector" name="unitSelector">
<option value="mi">Miles</option>
<option value="km">Kilometers</option>
<option value="ft">Feet</option>
<option value="mt">Metres</option>
<option value="in">Inches</option>
<option value="yd">Yards</option>
<option value="fa">Fathoms</option>
<option value="na">Nautical miles</option>
<option value="ch">Chains</option>
<option value="rd">Rods</option>
<option value="fr">Furlongs</option>
</select>
<p>Click to place a circle, right click to remove <a href="#help" id="gethelp">?</a></p>
</form>
<form id="search">
<input type="text" id="searchInput" name="searchInput" placeholder="Search for a place…" />
</form>
<article id="help">
<h1>Draw Circles on a Map</h1>
<p>Clicking anywhere on the map will draw a circle on the map centered on your click, with the radius specified at the bottom left of the screen. Change the size of the circle by dragging the handles. Move the circle by dragging it around. Click the circle to see its exact location and radius. Right-click a circle to remove it.</p>
<p>Created by <a href="https://www.4roadservice.com">4 Road Service</a> on the shoulders of <a href="https://github.com/DrJam">DrJam</a> and <a href="https://github.com/obeattie">Oliver Beattie</a>.</p>
<p>Submit any tickets or pull requests <a href="https://github.com/4RoadService/gmaps-radius/issues">here on Github</a>. You should follow <a href="https://www.twitter.com/4roadservice">@4RoadService</a> on Twitter.</p>
<p>Click anywhere on this box to make it go away.</p>
</article>
<script type="text/javascript" src="https://maps.google.com/maps/api/js?key=AIzaSyAFPz3bpdEgy3l42s946bDLH4hizWsyOQE&libraries=places"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/zepto/1.0/zepto.min.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/lodash/4.12.0/lodash.min.js"></script>
<script type="text/javascript" src="./static/build/js/app.js"></script>
<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','https://www.google-analytics.com/analytics.js','ga');
ga('create', 'UA-8971519-6', 'auto');
ga('send', 'pageview');
</script>
</body>
</html>