머지 진행

@@ -49,7 +49,7 @@ td {
   color: #808080;
   font-size: 8pt;
 }
-#map {
+#map{
   height: 400px;
   width: 100%;
- }
+}

@@ -3,6 +3,7 @@
     <title><%= title %></title>
     <link rel='stylesheet' href='/stylesheets/style.css'/>
     <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
+    <script async defer src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBTR69UvS1403rvBcM64_8nlzpKLv23RIE&libraries=places"></script>
     <script>
 
         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 @@
 
         resultObject = new Array();
 
-        $(document).ready(function() {
-          $('.sidenav').hide();
-          $('#show').click(function() {
-            $('.sidenav').slideToggle("fast");
-          });
-
-          if("geolocation" in navigator) {
-            navigator.geolocation.getCurrentPosition(function(position) {
-               findShops(position.coords.latitude, position.coords.longitude);
-               initMap(position.coords.latitude, position.coords.longitude);
-            });
-          } else {
-
-          }
-
         function findShops(latitude, longitude) {
 
           //var parameter = "&mapX=" + 126.981611 + "&mapY=" + 37.568477;
@@ -51,8 +37,17 @@
                                 data.title = $(this).find("title").text()
                                 data.lng = $(this).find("mapx").text()
                                 data.lat = $(this).find("mapy").text()
+                                //console.log(data)
                                 resultObject.push(data);
                               });
+
+                              var markers = resultObject.map(function(currentValue, index, array) {
+                                var marker = new google.maps.Marker({
+                                  position: {lat: Number(currentValue.lat), lng: Number(currentValue.lng)},
+                                  title: currentValue.title,
+                                });
+                                marker.setMap(map);
+                              });
                           }
                       }
                    });
@@ -61,23 +56,105 @@
            });
         }
 
+        $('.popup').click(function(e){
 
-        });
+        })
 
         function initMap(latitude, longitude) {
-          var position = {lat: parseFloat(latitude), lng: parseFloat(longitude)};
-          var map = new google.maps.Map(document.getElementById('map'), {
-            zoom: 4,
-            center: position
+          var center = {lat: latitude, lng: longitude};
+          map = new google.maps.Map(document.getElementById('map'), {
+            zoom: 15,
+            center: center
+          });
+
+          var marker = new google.maps.Marker({
+            position: center,
+            map: map
+          });
+
+          infowindow = new google.maps.InfoWindow();
+
+          var service = new google.maps.places.PlacesService(map);
+
+          service.nearbySearch({
+            location: center,
+            radius: 1000,
+            type: ['restaurant']
+          }, callback);
+          function callback(results, status) {
+            if (status === google.maps.places.PlacesServiceStatus.OK) {
+              for (var i = 0; i < results.length; i++) {
+                createMarker(results[i]);
+              }
+            }
+          }
+
+          function createMarker(place) {
+            var image1 = 'http://localhost:3000/images/restaurant_1.png'
+            var image2 = 'http://localhost:3000/images/restaurant_2.png'
+
+            var placeLoc = place.geometry.location;
+            var marker1 = new google.maps.Marker({
+              map: map,
+              position: place.geometry.location,
+              icon: image1
+            });
+            var marker2 = new google.maps.Marker({
+              map: map,
+              position: place.geometry.location,
+              icon: image2
+            });
+            marker2.setMap(null);
+
+            var contentString = '<div id="content">'+
+                                '<div id="siteNotice">'+
+                                '</div>'+
+                                '<h1 id="firstHeading" class="firstHeading">'+place.name+'</h1>'+
+                                '<div id="bodyContent">'+
+                                '<p>주소: '+place.vicinity+'<br/>'+
+                                '<a href="https://localhost:3000/id=297882194">'+
+                                '표시하기</a> '+
+                                '</p>'+
+                                '</div>'+
+                                '</div>';
+
+
+            google.maps.event.addListener(marker1, 'click', function(e) {
+              var infowindow = new google.maps.InfoWindow({
+                content: contentString,
+                maxWidth: 300
+              });
+              infowindow.open(map, this);
+              //marker1.setMap(null);
+              //marker2.setMap(map);
             });
-          var markers = resultObject.map(function(location, i) {
-            console.log(location)
-            return new google.maps.Marker({
-              position: location,
-              label: labels[i % labels.length]
+            google.maps.event.addListener(marker2, 'click', function() {
+              var infowindow = new google.maps.InfoWindow({
+                content: contentString,
+                maxWidth: 300
               });
+              infowindow.open(map, this);
             });
           }
+
+        }
+
+        $(document).ready(function() {
+          $('.sidenav').hide();
+          $('#show').click(function() {
+            $('.sidenav').slideToggle("fast");
+          });
+
+          if("geolocation" in navigator) {
+            navigator.geolocation.getCurrentPosition(function(position) {
+               //console.log(position.coords.latitude)
+               //findShops(position.coords.latitude, position.coords.longitude);
+               initMap(position.coords.latitude, position.coords.longitude);
+            });
+          } else {
+
+          }
+        });
     </script>
   </head>
   <body>
@@ -94,8 +171,7 @@
 
     <div id ="content">
       <div id="map"></div>
-      <script async defer src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBTR69UvS1403rvBcM64_8nlzpKLv23RIE&callback=initMap"></script>
-
+      <div id="popup"></div>
     </div>
 
     <div id ="footer"></div>