-
Notifications
You must be signed in to change notification settings - Fork 1
/
Copy pathwaypoints..html
160 lines (109 loc) · 5.81 KB
/
waypoints..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
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
<!--
===============================================================================================================
== Project Name : HelloMaps
== Project Description : Hellomaps is a simple to use wesbite for finding the the optimal path from your Location to your Destination.
== Created by : Shubham Goswami
==============================================================================================================
-->
<!DOCTYPE html>
<html>
<head>
<title>Display waypoints on map</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.1.1/css/all.css" integrity="sha384-O8whS3fhG2OnA5Kas0Y9l3cfpmYjapjI0E4theH4iuMD+pLhbf6JI0jIMfYcK3yZ" crossorigin="anonymous">
<link rel="stylesheet" type="text/css" href="waypoints.css">
<link rel="stylesheet" type="text/css" href="dash.css">
<link rel="stylesheet" type="text/css" href="extra.css">
</head>
<body>
<div class="d-flex flex-column flex-md-row align-items-center p-3 px-md-4 mb-3 bg-white border-bottom box-shadow">
<h5 class="my-0 mr-md-auto font-weight-normal ">HelloMaps</h5>
More by us : <a class="btn btn-outline-primary ml-2" href="{{ url('/logout') }}">Color Insperation </a>
</div>
<div class="container mb-4">
<div class="row">
<div class="col-md-8">
<!-- Start Map -->
<div id="map_canvas" class="my_map"></div>
<!-- End Map -->
</div>
<div class="col-md-4">
<!-- Start Origin Address -->
<div class="row ">
<div class="card mb-4" style="width: 100%;">
<div class="card-header mb-0">
Set Starting Points
</div>
<div class="card-body mt-0 pt-0">
<div class="form-group">
<input id="address_origin" class="form-control address_origin" placeholder="Origin address"/>
</div>
<div class="input-group">
<input id="lng_origin" class="form-control lat_lng" type="text" placeholder="Origin longitude">
<input id="lat_origin" class="form-control lat_lng" type="text" placeholder="Origin latitude">
</div>
</div>
</div>
<div class="card mb-4" style="width: 100%;">
<div class="card-header mb-">
Way Points
</div>
<div class="card-body mt-0 pt-0">
<div class="form-group">
<!-- Start WayPoints Address -->
<div class=" waypoint_address_section">
<div class="waypoints">
</div>
</div>
</div>
<div style="cursor: pointer;" id="add-way-point">
<i class="fa fa-plus fa-sm icon_add_way_point mr-2" title="Add waypoint"> </i>Add Point
</div>
</div>
</div>
<div class="card mb-4" style="width: 100%;">
<div class="card-header mb-0">
Set Destination Points
</div>
<div class="card-body mt-0 pt-0">
<div class="form-group">
<!--Start Destination Address Field-->
<input id="address_destination" class="form-control address_destination" placeholder="Destination address"/>
<!--Start Destination Address Field-->
</div>
<div class="input-group">
<!--Start Fields Lat Lng Destination-->
<input id="lat_destination" class="form-control lat_lng" type="text" placeholder="Destination latitude">
<input id="lng_destination" class="form-control lat_lng" type="text" placeholder="Destination longitude">
<!--Start Fields Lat Lng Destination-->
</div>
</div>
</div>
</div>
<!-- End Origin Address -->
<!-- End WayPoints Address -->
<!-- Start Destination Address -->
<div class="row destination_address_section">
<!-- Start Button Get Path-->
<div class = "button-style">
<a class="btn btn-primary btn-get-path text-white mr-3" onclick="getpaths()"><b>Get Path</b></a>
</div>
<!-- End Button Get Path-->
<div class = "button-style">
<a id="reload" class="mb-2 btn btn-sm btn-outline-info btn-get-path text-info" onclick="window.location.reload();"><b>Reload</b></a>
</div>
</div>
<!-- End Destination Address -->
</div>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
<script type='text/javascript' src='config.js'></script>
<script src="waypoints.js"></script>
<script async defer
src="https://maps.googleapis.com/maps/api/js?key=AIzaSyALsqyxl-mKrzOjh_VWKUP8-UEHTp97ZhM&callback=initMap&libraries=geometry,places&sensor=false">
</script>
</body>
</html>