김재현 / open-source-project-2017-02

Go to a project
Toggle navigation Toggle navigation pinning
김재현
e6b28ced 1 parent c459f34a

머지 진행

Inline Side-by-side
Showing 4 changed files with 105 additions and 29 deletions
...@@ -49,7 +49,7 @@ td { ...@@ -49,7 +49,7 @@ td {
49 color: #808080; 49 color: #808080;
50 font-size: 8pt; 50 font-size: 8pt;
51 } 51 }
52 -#map { 52 +#map{
53 height: 400px; 53 height: 400px;
54 width: 100%; 54 width: 100%;
55 - } 55 +}
......
...@@ -3,6 +3,7 @@ ...@@ -3,6 +3,7 @@
3 <title><%= title %></title> 3 <title><%= title %></title>
4 <link rel='stylesheet' href='/stylesheets/style.css'/> 4 <link rel='stylesheet' href='/stylesheets/style.css'/>
5 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> 5 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
6 + <script async defer src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBTR69UvS1403rvBcM64_8nlzpKLv23RIE&libraries=places"></script>
6 <script> 7 <script>
7 8
8 requestUrl = "http://api.visitkorea.or.kr/openapi/service/rest/KorService/locationBasedList?serviceKey=D0l3YlPyS%2FkOOP6THiiZfSx2sqFsFLD7F14cAj7kqio3k7G%2BPHsb66v2W4C5qOuj7GeEXqjaYsFFZcn%2BLIDItg%3D%3D&numOfRoews=10&startPage=1&MobileOS=ETC&MobileApp=openSource&arrange=A&contenTypeId=15&listYN=Y&radius=10000" 9 requestUrl = "http://api.visitkorea.or.kr/openapi/service/rest/KorService/locationBasedList?serviceKey=D0l3YlPyS%2FkOOP6THiiZfSx2sqFsFLD7F14cAj7kqio3k7G%2BPHsb66v2W4C5qOuj7GeEXqjaYsFFZcn%2BLIDItg%3D%3D&numOfRoews=10&startPage=1&MobileOS=ETC&MobileApp=openSource&arrange=A&contenTypeId=15&listYN=Y&radius=10000"
...@@ -10,21 +11,6 @@ ...@@ -10,21 +11,6 @@
10 11
11 resultObject = new Array(); 12 resultObject = new Array();
12 13
13 - $(document).ready(function() {
14 - $('.sidenav').hide();
15 - $('#show').click(function() {
16 - $('.sidenav').slideToggle("fast");
17 - });
18 -
19 - if("geolocation" in navigator) {
20 - navigator.geolocation.getCurrentPosition(function(position) {
21 - findShops(position.coords.latitude, position.coords.longitude);
22 - initMap(position.coords.latitude, position.coords.longitude);
23 - });
24 - } else {
25 -
26 - }
27 -
28 function findShops(latitude, longitude) { 14 function findShops(latitude, longitude) {
29 15
30 //var parameter = "&mapX=" + 126.981611 + "&mapY=" + 37.568477; 16 //var parameter = "&mapX=" + 126.981611 + "&mapY=" + 37.568477;
...@@ -51,8 +37,17 @@ ...@@ -51,8 +37,17 @@
51 data.title = $(this).find("title").text() 37 data.title = $(this).find("title").text()
52 data.lng = $(this).find("mapx").text() 38 data.lng = $(this).find("mapx").text()
53 data.lat = $(this).find("mapy").text() 39 data.lat = $(this).find("mapy").text()
40 + //console.log(data)
54 resultObject.push(data); 41 resultObject.push(data);
55 }); 42 });
43 +
44 + var markers = resultObject.map(function(currentValue, index, array) {
45 + var marker = new google.maps.Marker({
46 + position: {lat: Number(currentValue.lat), lng: Number(currentValue.lng)},
47 + title: currentValue.title,
48 + });
49 + marker.setMap(map);
50 + });
56 } 51 }
57 } 52 }
58 }); 53 });
...@@ -61,23 +56,105 @@ ...@@ -61,23 +56,105 @@
61 }); 56 });
62 } 57 }
63 58
59 + $('.popup').click(function(e){
64 60
65 - }); 61 + })
66 62
67 function initMap(latitude, longitude) { 63 function initMap(latitude, longitude) {
68 - var position = {lat: parseFloat(latitude), lng: parseFloat(longitude)}; 64 + var center = {lat: latitude, lng: longitude};
69 - var map = new google.maps.Map(document.getElementById('map'), { 65 + map = new google.maps.Map(document.getElementById('map'), {
70 - zoom: 4, 66 + zoom: 15,
71 - center: position 67 + center: center
68 + });
69 +
70 + var marker = new google.maps.Marker({
71 + position: center,
72 + map: map
73 + });
74 +
75 + infowindow = new google.maps.InfoWindow();
76 +
77 + var service = new google.maps.places.PlacesService(map);
78 +
79 + service.nearbySearch({
80 + location: center,
81 + radius: 1000,
82 + type: ['restaurant']
83 + }, callback);
84 + function callback(results, status) {
85 + if (status === google.maps.places.PlacesServiceStatus.OK) {
86 + for (var i = 0; i < results.length; i++) {
87 + createMarker(results[i]);
88 + }
89 + }
90 + }
91 +
92 + function createMarker(place) {
93 + var image1 = 'http://localhost:3000/images/restaurant_1.png'
94 + var image2 = 'http://localhost:3000/images/restaurant_2.png'
95 +
96 + var placeLoc = place.geometry.location;
97 + var marker1 = new google.maps.Marker({
98 + map: map,
99 + position: place.geometry.location,
100 + icon: image1
101 + });
102 + var marker2 = new google.maps.Marker({
103 + map: map,
104 + position: place.geometry.location,
105 + icon: image2
106 + });
107 + marker2.setMap(null);
108 +
109 + var contentString = '<div id="content">'+
110 + '<div id="siteNotice">'+
111 + '</div>'+
112 + '<h1 id="firstHeading" class="firstHeading">'+place.name+'</h1>'+
113 + '<div id="bodyContent">'+
114 + '<p>주소: '+place.vicinity+'<br/>'+
115 + '<a href="https://localhost:3000/id=297882194">'+
116 + '표시하기</a> '+
117 + '</p>'+
118 + '</div>'+
119 + '</div>';
120 +
121 +
122 + google.maps.event.addListener(marker1, 'click', function(e) {
123 + var infowindow = new google.maps.InfoWindow({
124 + content: contentString,
125 + maxWidth: 300
126 + });
127 + infowindow.open(map, this);
128 + //marker1.setMap(null);
129 + //marker2.setMap(map);
72 }); 130 });
73 - var markers = resultObject.map(function(location, i) { 131 + google.maps.event.addListener(marker2, 'click', function() {
74 - console.log(location) 132 + var infowindow = new google.maps.InfoWindow({
75 - return new google.maps.Marker({ 133 + content: contentString,
76 - position: location, 134 + maxWidth: 300
77 - label: labels[i % labels.length]
78 }); 135 });
136 + infowindow.open(map, this);
79 }); 137 });
80 } 138 }
139 +
140 + }
141 +
142 + $(document).ready(function() {
143 + $('.sidenav').hide();
144 + $('#show').click(function() {
145 + $('.sidenav').slideToggle("fast");
146 + });
147 +
148 + if("geolocation" in navigator) {
149 + navigator.geolocation.getCurrentPosition(function(position) {
150 + //console.log(position.coords.latitude)
151 + //findShops(position.coords.latitude, position.coords.longitude);
152 + initMap(position.coords.latitude, position.coords.longitude);
153 + });
154 + } else {
155 +
156 + }
157 + });
81 </script> 158 </script>
82 </head> 159 </head>
83 <body> 160 <body>
...@@ -94,8 +171,7 @@ ...@@ -94,8 +171,7 @@
94 171
95 <div id ="content"> 172 <div id ="content">
96 <div id="map"></div> 173 <div id="map"></div>
97 - <script async defer src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBTR69UvS1403rvBcM64_8nlzpKLv23RIE&callback=initMap"></script> 174 + <div id="popup"></div>
98 -
99 </div> 175 </div>
100 176
101 <div id ="footer"></div> 177 <div id ="footer"></div>
......