김대철 / CafeRecommend

Go to a project
Toggle navigation Toggle navigation pinning
dckat
d94cbedc 1 parent 5f056929

지도에 카페 마커 표시하기 

feat, test: map.ejs 카페 테스트 데이터로 15개 지도에 띄우고 상세정보 표현
Inline Side-by-side
Showing 7 changed files with 337 additions and 87 deletions
...@@ -1151,16 +1151,16 @@ ...@@ -1151,16 +1151,16 @@
1151 "resolved": "https://registry.npmjs.org/is-yarn-global/-/is-yarn-global-0.3.0.tgz", 1151 "resolved": "https://registry.npmjs.org/is-yarn-global/-/is-yarn-global-0.3.0.tgz",
1152 "integrity": "sha512-VjSeb/lHmkoyd8ryPVIKvOCn4D1koMqY+vqyjjUfc3xyKtP4dYOxM44sZrnqQSzSds3xyOrUTLTC9LVCVgLngw==" 1152 "integrity": "sha512-VjSeb/lHmkoyd8ryPVIKvOCn4D1koMqY+vqyjjUfc3xyKtP4dYOxM44sZrnqQSzSds3xyOrUTLTC9LVCVgLngw=="
1153 }, 1153 },
1154 - "isstream": {
1155 - "version": "0.1.2",
1156 - "resolved": "https://registry.npmjs.org/isstream/-/isstream-0.1.2.tgz",
1157 - "integrity": "sha1-R+Y/evVa+m+S4VAOaQ64uFKcCZo="
1158 - },
1159 "isarray": { 1154 "isarray": {
1160 "version": "1.0.0", 1155 "version": "1.0.0",
1161 "resolved": "https://registry.npmjs.org/isarray/-/isarray-1.0.0.tgz", 1156 "resolved": "https://registry.npmjs.org/isarray/-/isarray-1.0.0.tgz",
1162 "integrity": "sha1-u5NdSFgsuhaMBoNJV6VKPgcSTxE=" 1157 "integrity": "sha1-u5NdSFgsuhaMBoNJV6VKPgcSTxE="
1163 }, 1158 },
1159 + "isstream": {
1160 + "version": "0.1.2",
1161 + "resolved": "https://registry.npmjs.org/isstream/-/isstream-0.1.2.tgz",
1162 + "integrity": "sha1-R+Y/evVa+m+S4VAOaQ64uFKcCZo="
1163 + },
1164 "jake": { 1164 "jake": {
1165 "version": "10.8.2", 1165 "version": "10.8.2",
1166 "resolved": "https://registry.npmjs.org/jake/-/jake-10.8.2.tgz", 1166 "resolved": "https://registry.npmjs.org/jake/-/jake-10.8.2.tgz",
...@@ -1799,6 +1799,11 @@ ...@@ -1799,6 +1799,11 @@
1799 "resolved": "https://registry.npmjs.org/signal-exit/-/signal-exit-3.0.3.tgz", 1799 "resolved": "https://registry.npmjs.org/signal-exit/-/signal-exit-3.0.3.tgz",
1800 "integrity": "sha512-VUJ49FC8U1OxwZLxIbTTrDvLnf/6TDgxZcK8wxR8zs13xpx7xbG60ndBlhNrFi2EMuFRoeDoJO7wthSLq42EjA==" 1800 "integrity": "sha512-VUJ49FC8U1OxwZLxIbTTrDvLnf/6TDgxZcK8wxR8zs13xpx7xbG60ndBlhNrFi2EMuFRoeDoJO7wthSLq42EjA=="
1801 }, 1801 },
1802 + "sqlstring": {
1803 + "version": "2.3.1",
1804 + "resolved": "https://registry.npmjs.org/sqlstring/-/sqlstring-2.3.1.tgz",
1805 + "integrity": "sha1-R1OT/56RR5rqYtyvDKPRSYOn+0A="
1806 + },
1802 "sshpk": { 1807 "sshpk": {
1803 "version": "1.16.1", 1808 "version": "1.16.1",
1804 "resolved": "https://registry.npmjs.org/sshpk/-/sshpk-1.16.1.tgz", 1809 "resolved": "https://registry.npmjs.org/sshpk/-/sshpk-1.16.1.tgz",
...@@ -1813,11 +1818,7 @@ ...@@ -1813,11 +1818,7 @@
1813 "jsbn": "~0.1.0", 1818 "jsbn": "~0.1.0",
1814 "safer-buffer": "^2.0.2", 1819 "safer-buffer": "^2.0.2",
1815 "tweetnacl": "~0.14.0" 1820 "tweetnacl": "~0.14.0"
1816 - }, 1821 + }
1817 - "sqlstring": {
1818 - "version": "2.3.1",
1819 - "resolved": "https://registry.npmjs.org/sqlstring/-/sqlstring-2.3.1.tgz",
1820 - "integrity": "sha1-R1OT/56RR5rqYtyvDKPRSYOn+0A="
1821 }, 1822 },
1822 "statuses": { 1823 "statuses": {
1823 "version": "1.4.0", 1824 "version": "1.4.0",
...@@ -2143,5 +2144,4 @@ ...@@ -2143,5 +2144,4 @@
2143 "integrity": "sha512-3wdGidZyq5PB084XLES5TpOSRA3wjXAlIWMhum2kRcv/41Sn2emQ0dycQW4uZXLejwKvg6EsvbdlVL+FYEct7A==" 2144 "integrity": "sha512-3wdGidZyq5PB084XLES5TpOSRA3wjXAlIWMhum2kRcv/41Sn2emQ0dycQW4uZXLejwKvg6EsvbdlVL+FYEct7A=="
2144 } 2145 }
2145 } 2146 }
2146 - }
2147 } 2147 }
......
...@@ -2,7 +2,7 @@ var express = require("express"); ...@@ -2,7 +2,7 @@ var express = require("express");
2 var router = express.Router(); 2 var router = express.Router();
3 3
4 var request = require("request"); 4 var request = require("request");
5 -var bodyParser=require('body-parser'); 5 +var bodyParser = require("body-parser");
6 6
7 var { OAuth2Client } = require("google-auth-library"); 7 var { OAuth2Client } = require("google-auth-library");
8 var querystring = require("querystring"); 8 var querystring = require("querystring");
...@@ -10,10 +10,10 @@ var querystring = require("querystring"); ...@@ -10,10 +10,10 @@ var querystring = require("querystring");
10 var CLIENT_ID = 10 var CLIENT_ID =
11 "94679084723-s5f0686p2porp9mkakrp1p89a48n24nj.apps.googleusercontent.com"; 11 "94679084723-s5f0686p2porp9mkakrp1p89a48n24nj.apps.googleusercontent.com";
12 var client = new OAuth2Client(CLIENT_ID); 12 var client = new OAuth2Client(CLIENT_ID);
13 -var mysql=require('mysql') 13 +var mysql = require("mysql");
14 var session = require("express-session"); 14 var session = require("express-session");
15 var FileStore = require("session-file-store")(session); 15 var FileStore = require("session-file-store")(session);
16 -router.use(bodyParser.urlencoded({extended:false})); //url인코딩 x 16 +router.use(bodyParser.urlencoded({ extended: false })); //url인코딩 x
17 router.use(bodyParser.json()); //json방식으로 파 17 router.use(bodyParser.json()); //json방식으로 파
18 router.use( 18 router.use(
19 session({ 19 session({
...@@ -24,10 +24,10 @@ router.use( ...@@ -24,10 +24,10 @@ router.use(
24 }) 24 })
25 ); 25 );
26 var connection = mysql.createConnection({ 26 var connection = mysql.createConnection({
27 - host : 'localhost', 27 + host: "localhost",
28 - user : 'root', 28 + user: "root",
29 - password : 'g79465', 29 + password: "g79465",
30 - database : 'caferecommend' 30 + database: "caferecommend",
31 }); 31 });
32 connection.connect(); 32 connection.connect();
33 /* GET home page. */ 33 /* GET home page. */
...@@ -59,22 +59,20 @@ router.post("/index", (req, res) => { ...@@ -59,22 +59,20 @@ router.post("/index", (req, res) => {
59 }); 59 });
60 60
61 router.get("/login", checkAuthenticated, (req, res) => { 61 router.get("/login", checkAuthenticated, (req, res) => {
62 - var sql = 'SELECT * FROM USER WHERE EMAIL=?'; 62 + var sql = "SELECT * FROM USER WHERE EMAIL=?";
63 - var parameter=[req.session.user.email]; 63 + var parameter = [req.session.user.email];
64 - connection.query(sql,parameter, function(err, row){ 64 + connection.query(sql, parameter, function (err, row) {
65 - if(err){ 65 + if (err) {
66 console.log(err); 66 console.log(err);
67 - } 67 + } else {
68 - else {
69 if (row.length > 0) { 68 if (row.length > 0) {
70 - console.log("이미 가입이 되어있는 아이디") 69 + console.log("이미 가입이 되어있는 아이디");
71 req.session.user.nickname = row[0].NICKNAME; 70 req.session.user.nickname = row[0].NICKNAME;
72 req.session.user.age = row[0].AGE; 71 req.session.user.age = row[0].AGE;
73 req.session.user.gender = row[0].GENDER; 72 req.session.user.gender = row[0].GENDER;
74 - return res.render('map', {user : req.session.user}) 73 + return res.render("map", { user: req.session.user });
75 - } 74 + } else {
76 - else{ 75 + return res.render("login", { user: req.session.user, message: "none" });
77 - return res.render("login", { user: req.session.user, message:'none' });
78 } 76 }
79 } 77 }
80 }); 78 });
...@@ -84,65 +82,42 @@ router.post("/login", (req, res) => { ...@@ -84,65 +82,42 @@ router.post("/login", (req, res) => {
84 console.log(req.body.nickname); 82 console.log(req.body.nickname);
85 console.log(req.body.age); 83 console.log(req.body.age);
86 console.log(req.body.gender); 84 console.log(req.body.gender);
87 - var sql =' SELECT * FROM USER WHERE NICKNAME=?'; 85 + var sql = " SELECT * FROM USER WHERE NICKNAME=?";
88 - var parameter=[req.body.nickname]; 86 + var parameter = [req.body.nickname];
89 - connection.query(sql, parameter, function(err,row){ 87 + connection.query(sql, parameter, function (err, row) {
90 - if(err){ 88 + if (err) {
91 console.log(err); 89 console.log(err);
92 } 90 }
93 - if(row.length>0){ 91 + if (row.length > 0) {
94 - console.log('동일 닉네임있음'); 92 + console.log("동일 닉네임있음");
95 93
96 - return res.render("login", {user : req.session.user, message: 'same nickname'}); 94 + return res.render("login", {
97 - } 95 + user: req.session.user,
98 - else{ 96 + message: "same nickname",
99 - req.session.user.nickname=req.body.nickname; 97 + });
100 - req.session.user.age=req.body.age; 98 + } else {
101 - req.session.user.gender=req.body.gender; 99 + req.session.user.nickname = req.body.nickname;
102 - var sql='INSERT INTO USER(EMAIL, NAME, NICKNAME, AGE, GENDER) VALUES(?,?,?,?,?)'; 100 + req.session.user.age = req.body.age;
103 - var parameter=[req.session.user.email, req.session.user.name, req.session.user.nickname, req.session.user.age, req.session.user.gender]; 101 + req.session.user.gender = req.body.gender;
104 - connection.query(sql, parameter, function(err, row){ 102 + var sql =
105 - if(err){ 103 + "INSERT INTO USER(EMAIL, NAME, NICKNAME, AGE, GENDER) VALUES(?,?,?,?,?)";
104 + var parameter = [
105 + req.session.user.email,
106 + req.session.user.name,
107 + req.session.user.nickname,
108 + req.session.user.age,
109 + req.session.user.gender,
110 + ];
111 + connection.query(sql, parameter, function (err, row) {
112 + if (err) {
106 console.log(err); 113 console.log(err);
107 - } 114 + } else {
108 - else{
109 console.log("새로운 user데이터 입력"); 115 console.log("새로운 user데이터 입력");
110 } 116 }
111 }); 117 });
112 - return res.render("map", { user : req.session.user }); 118 + return res.render("map", { user: req.session.user });
113 } 119 }
114 }); 120 });
115 -
116 -});
117 -
118 -router.get("/cafe", (req, res) => {
119 - let code = "CE7";
120 - let encodedStr = querystring.escape(code);
121 -
122 - let kakaoOptions = {
123 - uri: `https://dapi.kakao.com/v2/local/search/category.json?category_group_code=${encodedStr}`,
124 - method: "GET",
125 - headers: {
126 - Authorization: "KakaoAK 2f3999076db5d32db975ab9862a64480",
127 - },
128 - encoding: "utf-8",
129 - };
130 - request(kakaoOptions, callback);
131 -
132 - function callback(error, res, body) {
133 - console.log(body);
134 - let kakaoPlaces = JSON.parse(body);
135 -
136 - for (document of kakaoPlaces.documents) {
137 - console.log(document.id);
138 - console.log(document.place_name);
139 - }
140 - }
141 - return;
142 -});
143 -
144 -router.get("/map", (req, res) => {
145 - res.render("map");
146 }); 121 });
147 122
148 module.exports = router; 123 module.exports = router;
...@@ -163,7 +138,7 @@ function checkAuthenticated(req, res, next) { ...@@ -163,7 +138,7 @@ function checkAuthenticated(req, res, next) {
163 verify() 138 verify()
164 .then(() => { 139 .then(() => {
165 req.session.user.name = user.name; 140 req.session.user.name = user.name;
166 - req.session.user.email=user.email; 141 + req.session.user.email = user.email;
167 next(); 142 next();
168 }) 143 })
169 .catch((err) => { 144 .catch((err) => {
...@@ -172,12 +147,13 @@ function checkAuthenticated(req, res, next) { ...@@ -172,12 +147,13 @@ function checkAuthenticated(req, res, next) {
172 } 147 }
173 148
174 router.get("/map", (req, res) => { 149 router.get("/map", (req, res) => {
175 - console.log(req.session.user); 150 + if (req.session.user) {
151 + res.render("map");
152 + }
176 res.render("map"); 153 res.render("map");
177 }); 154 });
178 155
179 - 156 +router.get("/logout", function (req, res) {
180 -router.get('/logout',function(req,res){
181 req.session.destroy(); //세션비우기 157 req.session.destroy(); //세션비우기
182 - res.redirect('/'); 158 + res.redirect("/");
183 }); 159 });
......
1 +{"cookie":{"originalMaxAge":null,"expires":null,"httpOnly":true,"path":"/"},"__lastAccess":1621408098038}
...\ No newline at end of file ...\ No newline at end of file
1 +{"cookie":{"originalMaxAge":null,"expires":null,"httpOnly":true,"path":"/"},"__lastAccess":1621338937349}
...\ No newline at end of file ...\ No newline at end of file
1 +{"cookie":{"originalMaxAge":null,"expires":null,"httpOnly":true,"path":"/"},"__lastAccess":1621338737470}
...\ No newline at end of file ...\ No newline at end of file
1 +{"cookie":{"originalMaxAge":null,"expires":null,"httpOnly":true,"path":"/"},"__lastAccess":1621337475210}
...\ No newline at end of file ...\ No newline at end of file
1 <!DOCTYPE html> 1 <!DOCTYPE html>
2 <html> 2 <html>
3 <head> 3 <head>
4 - <title>KaKao Map</title> 4 + <title>Cafe Map</title>
5 - <link rel="stylesheet" href="/stylesheets/style.css" /> 5 + <style>
6 + .map_wrap,
7 + .map_wrap * {
8 + margin: 0;
9 + padding: 0;
10 + font-family: "Malgun Gothic", dotum, "돋움", sans-serif;
11 + font-size: 12px;
12 + }
13 + .map_wrap {
14 + position: relative;
15 + width: 100%;
16 + height: 350px;
17 + }
18 + #category {
19 + position: absolute;
20 + top: 10px;
21 + left: 10px;
22 + border-radius: 5px;
23 + border: 1px solid #909090;
24 + box-shadow: 0 1px 1px rgba(0, 0, 0, 0.4);
25 + background: #fff;
26 + overflow: hidden;
27 + z-index: 2;
28 + }
29 + #category li {
30 + float: left;
31 + list-style: none;
32 + width: 50px;
33 + border-right: 1px solid #acacac;
34 + padding: 6px 0;
35 + text-align: center;
36 + cursor: pointer;
37 + }
38 + #category li.on {
39 + background: #eee;
40 + }
41 + #category li:hover {
42 + background: #ffe6e6;
43 + border-left: 1px solid #acacac;
44 + margin-left: -1px;
45 + }
46 + #category li:last-child {
47 + margin-right: 0;
48 + border-right: 0;
49 + }
50 + #category li span {
51 + display: block;
52 + margin: 0 auto 3px;
53 + width: 27px;
54 + height: 28px;
55 + }
56 + #category li .category_bg {
57 + background: url(https://t1.daumcdn.net/localimg/localimages/07/mapapidoc/places_category.png)
58 + no-repeat;
59 + }
60 + #category li .bank {
61 + background-position: -10px 0;
62 + }
63 + #category li .mart {
64 + background-position: -10px -36px;
65 + }
66 + #category li .pharmacy {
67 + background-position: -10px -72px;
68 + }
69 + #category li .oil {
70 + background-position: -10px -108px;
71 + }
72 + #category li .cafe {
73 + background-position: -10px -144px;
74 + }
75 + #category li .store {
76 + background-position: -10px -180px;
77 + }
78 + #category li.on .category_bg {
79 + background-position-x: -46px;
80 + }
81 + .placeinfo_wrap {
82 + position: absolute;
83 + bottom: 28px;
84 + left: -150px;
85 + width: 300px;
86 + }
87 + .placeinfo {
88 + position: relative;
89 + width: 100%;
90 + border-radius: 6px;
91 + border: 1px solid #ccc;
92 + border-bottom: 2px solid #ddd;
93 + padding-bottom: 10px;
94 + background: #fff;
95 + }
96 + .placeinfo:nth-of-type(n) {
97 + border: 0;
98 + box-shadow: 0px 1px 2px #888;
99 + }
100 + .placeinfo_wrap .after {
101 + content: "";
102 + position: relative;
103 + margin-left: -12px;
104 + left: 50%;
105 + width: 22px;
106 + height: 12px;
107 + background: url("https://t1.daumcdn.net/localimg/localimages/07/mapapidoc/vertex_white.png");
108 + }
109 + .placeinfo a,
110 + .placeinfo a:hover,
111 + .placeinfo a:active {
112 + color: #fff;
113 + text-decoration: none;
114 + }
115 + .placeinfo a,
116 + .placeinfo span {
117 + display: block;
118 + text-overflow: ellipsis;
119 + overflow: hidden;
120 + white-space: nowrap;
121 + }
122 + .placeinfo span {
123 + margin: 5px 5px 0 5px;
124 + cursor: default;
125 + font-size: 13px;
126 + }
127 + .placeinfo .title {
128 + font-weight: bold;
129 + font-size: 14px;
130 + border-radius: 6px 6px 0 0;
131 + margin: -1px -1px 0 -1px;
132 + padding: 10px;
133 + color: #fff;
134 + background: #d95050;
135 + background: #d95050
136 + url(https://t1.daumcdn.net/localimg/localimages/07/mapapidoc/arrow_white.png)
137 + no-repeat right 14px center;
138 + }
139 + .placeinfo .tel {
140 + color: #0f7833;
141 + }
142 + .placeinfo .jibun {
143 + color: #999;
144 + font-size: 11px;
145 + margin-top: 0;
146 + }
147 + </style>
6 </head> 148 </head>
7 <body> 149 <body>
8 <div id="map" style="width: 100%; height: 575px"></div> 150 <div id="map" style="width: 100%; height: 575px"></div>
9 151
10 <script 152 <script
11 type="text/javascript" 153 type="text/javascript"
12 - src="//dapi.kakao.com/v2/maps/sdk.js?appkey=68cbccbcd6f0fef0a213e62ad37393ee" 154 + src="//dapi.kakao.com/v2/maps/sdk.js?appkey=68cbccbcd6f0fef0a213e62ad37393ee&libraries=services"
13 ></script> 155 ></script>
14 <script> 156 <script>
15 var lat = ""; 157 var lat = "";
16 var lon = ""; 158 var lon = "";
17 159
160 + var placeOverlay = new kakao.maps.CustomOverlay({ zIndex: 1 });
161 + var contentNode = document.createElement("div");
162 + var markers = [];
163 + var currCategory = "CE7"; // 카테고리코드: 카페
164 + var order = 1;
165 +
18 var mapContainer = document.getElementById("map"), 166 var mapContainer = document.getElementById("map"),
19 mapOption = { 167 mapOption = {
20 center: new kakao.maps.LatLng(36.2477502, 127.078164), 168 center: new kakao.maps.LatLng(36.2477502, 127.078164),
...@@ -23,6 +171,26 @@ ...@@ -23,6 +171,26 @@
23 171
24 var map = new kakao.maps.Map(mapContainer, mapOption); 172 var map = new kakao.maps.Map(mapContainer, mapOption);
25 173
174 + var ps = new kakao.maps.services.Places(map);
175 +
176 + kakao.maps.event.addListener(map, "idle", searchPlaces);
177 +
178 + contentNode.className = "placeinfo_wrap";
179 +
180 + addEventHandle(contentNode, "mousedown", kakao.maps.event.preventMap);
181 + addEventHandle(contentNode, "touchstart", kakao.maps.event.preventMap);
182 +
183 + placeOverlay.setContent(contentNode);
184 +
185 + function addEventHandle(target, type, callback) {
186 + if (target.addEventListener) {
187 + target.addEventListener(type, callback);
188 + } else {
189 + target.attachEvent("on" + type, callback);
190 + }
191 + }
192 +
193 + placeOverlay.setContent(contentNode);
26 if (navigator.geolocation) { 194 if (navigator.geolocation) {
27 navigator.geolocation.getCurrentPosition(function (position) { 195 navigator.geolocation.getCurrentPosition(function (position) {
28 lat = position.coords.latitude; 196 lat = position.coords.latitude;
...@@ -41,6 +209,108 @@ ...@@ -41,6 +209,108 @@
41 function displayCurrentPosition(locPosition) { 209 function displayCurrentPosition(locPosition) {
42 map.setCenter(locPosition); 210 map.setCenter(locPosition);
43 } 211 }
212 +
213 + kakao.maps.event.addListener(map, "idle", searchPlaces);
214 +
215 + function searchPlaces() {
216 + if (!currCategory) {
217 + return;
218 + }
219 + placeOverlay.setMap(null);
220 +
221 + ps.categorySearch(currCategory, placesSearchCB, { usemapBounds: true });
222 + }
223 +
224 + function placesSearchCB(data, status, pagination) {
225 + if (status === kakao.maps.services.Status.OK) {
226 + displayPlaces(data);
227 + }
228 + }
229 +
230 + function displayPlaces(places) {
231 + for (var i = 0; i < places.length; i++) {
232 + var marker = addMarker(
233 + new kakao.maps.LatLng(places[i].y, places[i].x),
234 + order
235 + );
236 +
237 + (function (marker, place) {
238 + kakao.maps.event.addListener(marker, "click", function () {
239 + displayPlaceInfo(place);
240 + });
241 + })(marker, places[i]);
242 + }
243 + }
244 +
245 + function addMarker(position, order) {
246 + var imageSrc =
247 + "https://t1.daumcdn.net/localimg/localimages/07/mapapidoc/places_category.png";
248 + var imageSize = new kakao.maps.Size(27, 30);
249 + var imgOptions = {
250 + spriteSize: new kakao.maps.Size(72, 220),
251 + spriteOrigin: new kakao.maps.Point(46, 150),
252 + offset: new kakao.maps.Point(11, 28),
253 + };
254 + var markerImage = new kakao.maps.MarkerImage(
255 + imageSrc,
256 + imageSize,
257 + imgOptions
258 + );
259 +
260 + var marker = new kakao.maps.Marker({
261 + position: position,
262 + image: markerImage,
263 + });
264 +
265 + marker.setMap(map);
266 + markers.push(marker);
267 +
268 + return marker;
269 + }
270 +
271 + function displayPlaceInfo(place) {
272 + var content =
273 + '<div class="placeinfo">' +
274 + ' <a class="title" href="' +
275 + place.place_url +
276 + '" target="_blank" title="' +
277 + place.place_name +
278 + '">' +
279 + place.place_name +
280 + "</a>";
281 +
282 + if (place.road_address_name) {
283 + content +=
284 + ' <span title="' +
285 + place.road_address_name +
286 + '">' +
287 + place.road_address_name +
288 + "</span>" +
289 + ' <span class="jibun" title="' +
290 + place.address_name +
291 + '">(지번 : ' +
292 + place.address_name +
293 + ")</span>";
294 + } else {
295 + content +=
296 + ' <span title="' +
297 + place.address_name +
298 + '">' +
299 + place.address_name +
300 + "</span>";
301 + }
302 +
303 + content +=
304 + ' <span class="tel">' +
305 + place.phone +
306 + "</span>" +
307 + "</div>" +
308 + '<div class="after"></div>';
309 +
310 + contentNode.innerHTML = content;
311 + placeOverlay.setPosition(new kakao.maps.LatLng(place.y, place.x));
312 + placeOverlay.setMap(map);
313 + }
44 </script> 314 </script>
45 </body> 315 </body>
46 </html> 316 </html>
......