김동훈 / OpenSource_Project

Go to a project
Toggle navigation Toggle navigation pinning
김다솜
0a65bca7 1 parent aa8b77ea

modify mainpage and add google map

Inline Side-by-side
Showing 2 changed files with 62 additions and 77 deletions
...@@ -29,7 +29,7 @@ ...@@ -29,7 +29,7 @@
29 function initMap() { 29 function initMap() {
30 map = new google.maps.Map(document.getElementById('map'), { 30 map = new google.maps.Map(document.getElementById('map'), {
31 center: {lat: -34.397, lng: 150.644}, 31 center: {lat: -34.397, lng: 150.644},
32 - zoom: 6 32 + zoom: 15
33 }); 33 });
34 infoWindow = new google.maps.InfoWindow; 34 infoWindow = new google.maps.InfoWindow;
35 35
......
...@@ -11,6 +11,20 @@ ...@@ -11,6 +11,20 @@
11 11
12 <title>저기어때</title> 12 <title>저기어때</title>
13 13
14 + <style>
15 + /* Always set the map height explicitly to define the size of the div
16 + * element that contains the map. */
17 + #map {
18 + height: 100%;
19 + }
20 + /* Optional: Makes the sample page fill the window. */
21 + html, body {
22 + height: 100%;
23 + margin: 0;
24 + padding: 0;
25 + }
26 + </style>
27 +
14 <!-- Bootstrap core CSS--> 28 <!-- Bootstrap core CSS-->
15 <link href="vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet"> 29 <link href="vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet">
16 30
...@@ -90,79 +104,53 @@ ...@@ -90,79 +104,53 @@
90 104
91 <div id="content-wrapper"> 105 <div id="content-wrapper">
92 106
93 - <div class="container-fluid"> 107 + <div id= "map"></div>
94 - <!-- Icon Cards--> 108 + <script>
95 - <!-- 109 + // Note: This example requires that you consent to location sharing when
96 - <div class="row"> 110 + // prompted by your browser. If you see the error "The Geolocation service
97 - <div class="col-xl-3 col-sm-6 mb-3"> 111 + // failed.", it means you probably did not give permission for the browser to
98 - <div class="card text-white bg-primary o-hidden h-100"> 112 + // locate you.
99 - <div class="card-body"> 113 + var map, infoWindow;
100 - <div class="card-body-icon"> 114 + function initMap() {
101 - <i class="fas fa-fw fa-comments"></i> 115 + map = new google.maps.Map(document.getElementById('map'), {
102 - </div> 116 + center: {lat: 34.497, lng: 127.027},
103 - <div class="mr-5">26 New Messages!</div> 117 + //center: {lat: -34.397, lng: 150.644},
104 - </div> 118 + zoom: 15
105 - <a class="card-footer text-white clearfix small z-1" href="#"> 119 + });
106 - <span class="float-left">View Details</span> 120 + infoWindow = new google.maps.InfoWindow;
107 - <span class="float-right"> 121 +
108 - <i class="fas fa-angle-right"></i> 122 + // Try HTML5 geolocation.
109 - </span> 123 + if (navigator.geolocation) {
110 - </a> 124 + navigator.geolocation.getCurrentPosition(function(position) {
111 - </div> 125 + var pos = {
112 - </div> 126 + lat: position.coords.latitude,
113 - <div class="col-xl-3 col-sm-6 mb-3"> 127 + lng: position.coords.longitude
114 - <div class="card text-white bg-warning o-hidden h-100"> 128 + };
115 - <div class="card-body"> 129 +
116 - <div class="card-body-icon"> 130 + infoWindow.setPosition(pos);
117 - <i class="fas fa-fw fa-list"></i> 131 + infoWindow.setContent('Location found.');
118 - </div> 132 + infoWindow.open(map);
119 - <div class="mr-5">11 New Tasks!</div> 133 + map.setCenter(pos);
120 - </div> 134 + }, function() {
121 - <a class="card-footer text-white clearfix small z-1" href="#"> 135 + handleLocationError(true, infoWindow, map.getCenter());
122 - <span class="float-left">View Details</span> 136 + });
123 - <span class="float-right"> 137 + } else {
124 - <i class="fas fa-angle-right"></i> 138 + // Browser doesn't support Geolocation
125 - </span> 139 + handleLocationError(false, infoWindow, map.getCenter());
126 - </a> 140 + }
127 - </div> 141 + }
128 - </div> 142 +
129 - <div class="col-xl-3 col-sm-6 mb-3"> 143 + function handleLocationError(browserHasGeolocation, infoWindow, pos) {
130 - <div class="card text-white bg-success o-hidden h-100"> 144 + infoWindow.setPosition(pos);
131 - <div class="card-body"> 145 + infoWindow.setContent(browserHasGeolocation ?
132 - <div class="card-body-icon"> 146 + 'Error: The Geolocation service failed.' :
133 - <i class="fas fa-fw fa-shopping-cart"></i> 147 + 'Error: Your browser doesn\'t support geolocation.');
134 - </div> 148 + infoWindow.open(map);
135 - <div class="mr-5">123 New Orders!</div> 149 + }
136 - </div> 150 + </script>
137 - <a class="card-footer text-white clearfix small z-1" href="#"> 151 + <script async defer
138 - <span class="float-left">View Details</span> 152 + src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDg4CkUEEt_96n1ork1nL5t4E_SpdKrgMI&callback=initMap">
139 - <span class="float-right"> 153 + </script>
140 - <i class="fas fa-angle-right"></i>
141 - </span>
142 - </a>
143 - </div>
144 - </div>
145 - <div class="col-xl-3 col-sm-6 mb-3">
146 - <div class="card text-white bg-danger o-hidden h-100">
147 - <div class="card-body">
148 - <div class="card-body-icon">
149 - <i class="fas fa-fw fa-life-ring"></i>
150 - </div>
151 - <div class="mr-5">13 New Tickets!!</div>
152 - </div>
153 - <a class="card-footer text-white clearfix small z-1" href="#">
154 - <span class="float-left">View Details</span>
155 - <span class="float-right">
156 - <i class="fas fa-angle-right"></i>
157 - </span>
158 - </a>
159 - </div>
160 - </div>
161 - </div>
162 - -->
163 -
164 -
165 -
166 <!-- Sticky Footer --> 154 <!-- Sticky Footer -->
167 <footer class="sticky-footer"> 155 <footer class="sticky-footer">
168 <div class="container my-auto"> 156 <div class="container my-auto">
...@@ -173,9 +161,6 @@ ...@@ -173,9 +161,6 @@
173 </footer> 161 </footer>
174 162
175 </div> 163 </div>
176 - <!-- /.content-wrapper -->
177 -
178 - </div>
179 <!-- /#wrapper --> 164 <!-- /#wrapper -->
180 165
181 <!-- Scroll to Top Button--> 166 <!-- Scroll to Top Button-->
......