김재현 / 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 134 additions and 58 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,6 +11,134 @@ ...@@ -10,6 +11,134 @@
10 11
11 resultObject = new Array(); 12 resultObject = new Array();
12 13
14 + function findShops(latitude, longitude) {
15 +
16 + //var parameter = "&mapX=" + 126.981611 + "&mapY=" + 37.568477;
17 + pageIndex = 1;
18 + var parameter = "&mapX=" + longitude + "&mapY=" + latitude + "&pageNo=" + pageIndex;
19 + $.ajax({
20 + type: "GET"
21 + ,dataType: "xml"
22 + ,url: requestUrl + parameter
23 + ,success: function(xml){
24 + totalCount = Number($(xml).find("totalCount").text());
25 + for(pageIndex=1; pageIndex<=totalCount/10; pageIndex++)
26 + {
27 + $.ajax({
28 + type: "GET"
29 + ,dataType: "xml"
30 + ,url: requestUrl + "&mapX=" + longitude + "&mapY=" + latitude + "&pageNo=" + pageIndex
31 + ,success: function(xml){
32 + var xmlData = $(xml).find("items item");
33 + var listLength = xmlData.length;
34 + if (listLength) {
35 + $(xmlData).each(function(){
36 + var data = new Object() ;
37 + data.title = $(this).find("title").text()
38 + data.lng = $(this).find("mapx").text()
39 + data.lat = $(this).find("mapy").text()
40 + //console.log(data)
41 + resultObject.push(data);
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 + });
51 + }
52 + }
53 + });
54 + }
55 + }
56 + });
57 + }
58 +
59 + $('.popup').click(function(e){
60 +
61 + })
62 +
63 + function initMap(latitude, longitude) {
64 + var center = {lat: latitude, lng: longitude};
65 + map = new google.maps.Map(document.getElementById('map'), {
66 + zoom: 15,
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);
130 + });
131 + google.maps.event.addListener(marker2, 'click', function() {
132 + var infowindow = new google.maps.InfoWindow({
133 + content: contentString,
134 + maxWidth: 300
135 + });
136 + infowindow.open(map, this);
137 + });
138 + }
139 +
140 + }
141 +
13 $(document).ready(function() { 142 $(document).ready(function() {
14 $('.sidenav').hide(); 143 $('.sidenav').hide();
15 $('#show').click(function() { 144 $('#show').click(function() {
...@@ -18,66 +147,14 @@ ...@@ -18,66 +147,14 @@
18 147
19 if("geolocation" in navigator) { 148 if("geolocation" in navigator) {
20 navigator.geolocation.getCurrentPosition(function(position) { 149 navigator.geolocation.getCurrentPosition(function(position) {
21 - findShops(position.coords.latitude, position.coords.longitude); 150 + //console.log(position.coords.latitude)
151 + //findShops(position.coords.latitude, position.coords.longitude);
22 initMap(position.coords.latitude, position.coords.longitude); 152 initMap(position.coords.latitude, position.coords.longitude);
23 }); 153 });
24 } else { 154 } else {
25 155
26 } 156 }
27 -
28 - function findShops(latitude, longitude) {
29 -
30 - //var parameter = "&mapX=" + 126.981611 + "&mapY=" + 37.568477;
31 - pageIndex = 1;
32 - var parameter = "&mapX=" + longitude + "&mapY=" + latitude + "&pageNo=" + pageIndex;
33 - $.ajax({
34 - type: "GET"
35 - ,dataType: "xml"
36 - ,url: requestUrl + parameter
37 - ,success: function(xml){
38 - totalCount = Number($(xml).find("totalCount").text());
39 - for(pageIndex=1; pageIndex<=totalCount/10; pageIndex++)
40 - {
41 - $.ajax({
42 - type: "GET"
43 - ,dataType: "xml"
44 - ,url: requestUrl + "&mapX=" + longitude + "&mapY=" + latitude + "&pageNo=" + pageIndex
45 - ,success: function(xml){
46 - var xmlData = $(xml).find("items item");
47 - var listLength = xmlData.length;
48 - if (listLength) {
49 - $(xmlData).each(function(){
50 - var data = new Object() ;
51 - data.title = $(this).find("title").text()
52 - data.lng = $(this).find("mapx").text()
53 - data.lat = $(this).find("mapy").text()
54 - resultObject.push(data);
55 - });
56 - }
57 - }
58 - });
59 - }
60 - }
61 - });
62 - }
63 -
64 -
65 }); 157 });
66 -
67 - function initMap(latitude, longitude) {
68 - var position = {lat: parseFloat(latitude), lng: parseFloat(longitude)};
69 - var map = new google.maps.Map(document.getElementById('map'), {
70 - zoom: 4,
71 - center: position
72 - });
73 - var markers = resultObject.map(function(location, i) {
74 - console.log(location)
75 - return new google.maps.Marker({
76 - position: location,
77 - label: labels[i % labels.length]
78 - });
79 - });
80 - }
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>
......