지역 검색후 지도에 마커 띄우기

@@ -3,10 +3,14 @@ var bodyParser = require('body-parser');
 var request = require('request');
 var cheerio = require('cheerio');
 var app =express();
+app.set('view engine','ejs');
+app.set('views','./views')
 app.use(express.urlencoded( {extended : false } ));
+
 app.locals.pretty=true;
-app.set('views','./views')
-app.set('view engine','pug');
+
+// app.set('view engine','pug');
+
 app.use(express.static('public'));
 var http = require('http');
 var fs = require('fs');
@@ -26,7 +30,7 @@ app.post('/',function(req,res,next){
 
     request($api_url,function(err,response,body){
         if(err) throw err;
-     
+        // console.log(body);
         //data부분만 추출
         var obj = JSON.parse(body).data;
         // console.log(obj);
@@ -37,25 +41,27 @@ app.post('/',function(req,res,next){
         
         // console.log(searchList);
         //result라는 변수에 담아 결과 보내기 
-        res.render('main', {result:searchList });
+        var hey = searchList[0].orgZipaddr.split(',');
+        res.render('index', {result:JSON.stringify(searchList) });
 
     })
 
 })
 
 app.get('/',function(req,res){
-    res.writeHead(200, {'Content-Type': 'text/html'});
-    fs.readFile('./map/kakaomap.html', null, function(err,data){
-        if(err){
-            res.writeHead(404);
-            res.write('error');
-        }
-        else{
-            console.log('complete!');
-            res.write(data);
-        }
-        res.end();
-    });
+    res.render('index');
+    // res.writeHead(200, {'Content-Type': 'text/html'});
+    // fs.readFile('./map/kakaomap.html', null, function(err,data){
+    //     if(err){
+    //         res.writeHead(404);
+    //         res.write('error');
+    //     }
+    //     else{
+    //         console.log('complete!');
+    //         res.write(data);
+    //     }
+    //     res.end();
+    // });
 })
 
 app.listen(3000,function(){

@@ -13,20 +13,106 @@
         <input type="submit"/>
       </p>
     </form>
-<div id="map" style="width:700px;height:400px;"></div>
+    <div id="map" style="width:700px;height:400px;"></div>
+
+    <script type="text/javascript" src="https://dapi.kakao.com/v2/maps/sdk.js?appkey=35fccf4b4e2a3179187346f26ed3f988"></script>
+    
     
-<script type="text/javascript" src="https://dapi.kakao.com/v2/maps/sdk.js?appkey=35fccf4b4e2a3179187346f26ed3f988"></script>
 <script>
 var mapContainer = document.getElementById('map'), // 지도를 표시할 div  
     mapOption = { 
-        center: new kakao.maps.LatLng(33.450701, 126.570667), // 지도의 중심좌표
+        center: new kakao.maps.LatLng(37.596672, 127.051950), // 지도의 중심좌표
         level: 3 // 지도의 확대 레벨
     };
 
 var map = new kakao.maps.Map(mapContainer, mapOption); // 지도를 생성합니다
  
-// 마커를 표시할 위치와 내용을 가지고 있는 객체 배열입니다 
-var positions = [
+
+
+// 지도 확대 축소를 제어할 수 있는 줌 컨트롤을 생성합니다 
+var zoomControl = new kakao.maps.ZoomControl();
+map.addControl(zoomControl, kakao.maps.ControlPosition.RIGHT);
+
+var listData = "<%= result %>";
+console.log(listData[1]);
+//입력되는 배열명이 listData로 들어오면 됨.
+listData.forEach(function(addr, index) {
+    var tmpaddr = addr[0].split(',');
+    console.log(tmpaddr);
+    geocoder.addressSearch(tmpaddr[0], function(result, status) { 
+        if (status === daum.maps.services.Status.OK) { 
+            var coords = new daum.maps.LatLng(result[0].y, result[0].x); 
+
+            var marker = new daum.maps.Marker({
+                position: coords,
+                clickable: true}); 
+                
+                // 마커를 지도에 표시합니다. 
+                marker.setMap(map); 
+                
+                // 인포윈도우를 생성합니다 
+                var infowindow = new kakao.maps.InfoWindow({
+                    content: '<div style="width:150px;text-align:center;padding:6px 0;">' + addr[1] + '</div>',
+                    removable : true
+                }); 
+                // 마커에 클릭이벤트를 등록합니다 
+                kakao.maps.event.addListener(marker, 'click', function() { 
+                    // 마커 위에 인포윈도우를 표시합니다 
+                    infowindow.open(map, marker);
+                });
+        }
+    });
+        
+}); 
+
+
+
+
+// for (var i = 0; i < positions.length; i ++) {
+//     // 마커를 생성합니다
+//     var marker = new kakao.maps.Marker({
+//         map: map, // 마커를 표시할 지도
+//         position: positions[i].latlng // 마커의 위치
+//     });
+
+//     // 마커에 표시할 인포윈도우를 생성합니다 
+//     var infowindow = new kakao.maps.InfoWindow({
+//         content: positions[i].content // 인포윈도우에 표시할 내용
+//     });
+
+//     // 마커에 mouseover 이벤트와 mouseout 이벤트를 등록합니다
+//     // 이벤트 리스너로는 클로저를 만들어 등록합니다 
+//     // for문에서 클로저를 만들어 주지 않으면 마지막 마커에만 이벤트가 등록됩니다
+//     kakao.maps.event.addListener(marker, 'mouseover', makeOverListener(map, marker, infowindow));
+//     kakao.maps.event.addListener(marker, 'mouseout', makeOutListener(infowindow));
+// }
+
+// 인포윈도우를 표시하는 클로저를 만드는 함수입니다 
+function makeOverListener(map, marker, infowindow) {
+    return function() {
+        infowindow.open(map, marker);
+    };
+}
+
+// 인포윈도우를 닫는 클로저를 만드는 함수입니다 
+function makeOutListener(infowindow) {
+    return function() {
+        infowindow.close();
+    };
+}
+</script>
+
+    <!-- <script>
+    var mapContainer = document.getElementById('map'), // 지도를 표시할 div  
+        mapOption = { 
+            center: new kakao.maps.LatLng(33.450701, 126.570667), // 지도의 중심좌표
+            level: 3 // 지도의 확대 레벨
+        };
+
+    var map = new kakao.maps.Map(mapContainer, mapOption); // 지도를 생성합니다
+    
+    // 마커를 표시할 위치와 내용을 가지고 있는 객체 배열입니다 
+    var positions = [
         {
             content: '<div>카카오</div>', 
             latlng: new kakao.maps.LatLng(33.450705, 126.570677)
@@ -43,9 +129,9 @@ var positions = [
             content: '<div>근린공원</div>',
             latlng: new kakao.maps.LatLng(33.451393, 126.570738)
         }
-];
+    ];
 
-for (var i = 0; i < positions.length; i ++) {
+    for (var i = 0; i < positions.length; i ++) {
         // 마커를 생성합니다
         var marker = new kakao.maps.Marker({
             map: map, // 마커를 표시할 지도
@@ -62,21 +148,21 @@ for (var i = 0; i < positions.length; i ++) {
         // for문에서 클로저를 만들어 주지 않으면 마지막 마커에만 이벤트가 등록됩니다
         kakao.maps.event.addListener(marker, 'mouseover', makeOverListener(map, marker, infowindow));
         kakao.maps.event.addListener(marker, 'mouseout', makeOutListener(infowindow));
-}
+    }
 
-// 인포윈도우를 표시하는 클로저를 만드는 함수입니다 
-function makeOverListener(map, marker, infowindow) {
+    // 인포윈도우를 표시하는 클로저를 만드는 함수입니다 
+    function makeOverListener(map, marker, infowindow) {
         return function() {
             infowindow.open(map, marker);
         };
-}
+    }
 
-// 인포윈도우를 닫는 클로저를 만드는 함수입니다 
-function makeOutListener(infowindow) {
+    // 인포윈도우를 닫는 클로저를 만드는 함수입니다 
+    function makeOutListener(infowindow) {
         return function() {
             infowindow.close();
         };
-}
-</script>
+    }
+    </script> -->
 </body>
 </html>
\ No newline at end of file

@@ -12,6 +12,7 @@
     "@google/maps": "^1.1.3",
     "body-parser": "^1.19.0",
     "cheerio": "^1.0.0-rc.9",
+    "ejs": "^3.1.6",
     "express": "^4.17.1",
     "pug": "^3.0.2",
     "request": "^2.88.2",

+<!DOCTYPE html>
+<html>
+<head>
+    <meta charset="utf-8">
+    <title>여러개 마커에 이벤트 등록하기1</title>
+    
+</head>
+<body>
+
+    <h1>COVID-19 의료기관 검색하기</h1>
+    <form action="/" method="post">
+      <p> 
+        <input type="text" name="region" placeholder="서울시"/>
+        <input type="submit"/>
+      </p>
+    </form>
+
+    <div id="map" style="width:700px;height:400px;"></div>  
+    <script type="text/javascript" src="https://dapi.kakao.com/v2/maps/sdk.js?appkey=35fccf4b4e2a3179187346f26ed3f988&libraries=services"></script>
+   
+   <script>
+    var mapContainer = document.getElementById('map'), // 지도를 표시할 div  
+        mapOption = { 
+            center: new kakao.maps.LatLng(37.596672, 127.051950), // 지도의 중심좌표
+            level: 3 // 지도의 확대 레벨
+        };
+    
+    var map = new kakao.maps.Map(mapContainer, mapOption); // 지도를 생성합니다
+    var geocoder = new kakao.maps.services.Geocoder();
+    // 지도 확대 축소를 제어할 수 있는 줌 컨트롤을 생성합니다 
+    var zoomControl = new kakao.maps.ZoomControl();
+    map.addControl(zoomControl, kakao.maps.ControlPosition.RIGHT);
+
+    var listData = "<%= result %>";
+    listData = listData.replaceAll('&#34;','\"');
+    listData = JSON.parse(listData);
+
+    console.log(listData);
+    // console.log(listData[1]);
+    //입력되는 배열명이 listData로 들어오면 됨.
+    listData.forEach(function(addr, index) {
+        var tmpaddr = ((addr.orgZipaddr).split(','))[0];
+        console.log(tmpaddr);
+        console.log("h");
+        geocoder.addressSearch(tmpaddr, function(result, status) { 
+            if (status === kakao.maps.services.Status.OK) { 
+                var coords = new kakao.maps.LatLng(result[0].y, result[0].x); 
+    
+                var marker = new kakao.maps.Marker({
+                    position: coords,
+                    clickable: true}); 
+                    
+                    // 마커를 지도에 표시합니다. 
+                    marker.setMap(map); 
+                    
+                    // 인포윈도우를 생성합니다 
+                    var infowindow = new kakao.maps.InfoWindow({
+                        content: '<div style="width:150px;text-align:center;padding:6px 0;">' + addr[1] + '</div>',
+                        removable : true
+                    }); 
+                    // 마커에 클릭이벤트를 등록합니다 
+                    kakao.maps.event.addListener(marker, 'click', function() { 
+                        // 마커 위에 인포윈도우를 표시합니다 
+                        infowindow.open(map, marker);
+                    });
+            }
+        });
+            
+    }); 
+    
+    // 인포윈도우를 표시하는 클로저를 만드는 함수입니다 
+    function makeOverListener(map, marker, infowindow) {
+        return function() {
+            infowindow.open(map, marker);
+        };
+    }
+    
+    // 인포윈도우를 닫는 클로저를 만드는 함수입니다 
+    function makeOutListener(infowindow) {
+        return function() {
+            infowindow.close();
+        };
+    }
+    </script>
+
+</body>
+</html>
\ No newline at end of file

-html
-    head 
-     meta(charset='utf-8')
-    body 
-      h1 COVID-19 의료기관 검색하기
+//- html
+//-     head 
+//-      meta(charset='utf-8')
+//-     body 
+//-       h1 COVID-19 의료기관 검색하기
 
-      form(action='/' method="post")
-        p 
-          input(type='text' name='region' placeholder='서울시')  
-          input(type='submit')
+//-       form(action='/' method="post")
+//-         p 
+//-           input(type='text' name='region' placeholder='서울시')  
+//-           input(type='submit')
 
-      //result값 있을때만 
-      if result!=NULL
-        table 
-          tr 
-            th 기관명
-            th 기관 전화번호
-            th 기관 주소
-            th 휴무일 여부
-            th 점심 시작시간
-            th 점심 종료시간
-            th 진료 시작기간
-            th 진료 종료시간
-            -for(i=1; i<result.length; i++)
-              tr
-                td= result[i].orgnm
-                td= result[i].orgTlno
-                td= result[i].orgZipaddr
-                td= result[i].hldyYn
-                td= result[i].lunchSttTm
-                td= result[i].lunchEndTm
-                td= result[i].sttTm
-                td= result[i].endTm
+//-       //result값 있을때만 
+//-       if result!=NULL
+//-         table 
+//-           tr 
+//-             th 기관명
+//-             th 기관 전화번호
+//-             th 기관 주소
+//-             th 휴무일 여부
+//-             th 점심 시작시간
+//-             th 점심 종료시간
+//-             th 진료 시작기간
+//-             th 진료 종료시간
+//-             -for(i=1; i<result.length; i++)
+//-               tr
+//-                 td= result[i].orgnm
+//-                 td= result[i].orgTlno
+//-                 td= result[i].orgZipaddr
+//-                 td= result[i].hldyYn
+//-                 td= result[i].lunchSttTm
+//-                 td= result[i].lunchEndTm
+//-                 td= result[i].sttTm
+//-                 td= result[i].endTm