map of restaurant location near me

wlstp8473
Commit 98902728cf0de3301e2ab4c94d71f7d7398a6574 98902728 1 parent 4191bd6d
Showing 1 changed file with 66 additions and 0 deletions
index.html
--- a/index.html 0 → 100644
View file @9890272
+++ b/index.html 0 → 100644
View file @9890272
+<!DOCTYPE html>
+<html>
+<head>
+	<meta charset="utf-8">
+	<title>다음 지도 API</title>
+</head>
+<body>
+	<div id="map" style="width:100%;height:100vh;"></div>
+
+	<script src="https://dapi.kakao.com/v2/maps/sdk.js?appkey=af5d8081362feb3d8c7f7f5a242af361&libraries=clusterer"></script>
+	<script>
+		var mapContainer = document.getElementById('map'), // 지도를 표시할 div 
+		    mapOption = {
+		        center: new kakao.maps.LatLng(37.4010573010236, 126.97627592909265), // 지도의 중심좌표
+		        level: 4, // 지도의 확대 레벨
+		        mapTypeId : kakao.maps.MapTypeId.ROADMAP // 지도종류
+		    }; 
+
+		// 지도를 생성한다 
+		var map = new kakao.maps.Map(mapContainer, mapOption); 
+       
+        // 마커 클러스터러를 생성합니다 
+        var clusterer = new kakao.maps.MarkerClusterer({
+            map: map, // 마커들을 클러스터로 관리하고 표시할 지도 객체 
+            averageCenter: true, // 클러스터에 포함된 마커들의 평균 위치를 클러스터 마커 위치로 설정 
+            minLevel: 10 // 클러스터 할 최소 지도 레벨 
+        });
+
+        var resturant_location = [
+            [37.402191246171625, 126.97679939968889,'<div style="padding:5px;">my location!</div>'], //여유가 된다면 파이썬 tele_chatbot_code의 resturant_location을 txt파일로 만들어서 파싱한 후 연결하기
+            [37.400679329216, 126.975117015358,'<div style="padding:5px;">통나무집춘천닭갈비!</div>'],
+            [37.4015081640269, 126.974624316623,'<div style="padding:5px;">2.5닭갈비</div>'],
+            [37.3925702184301, 126.975530754058,'<div style="padding:5px;">박가네춘천닭갈비</div>'],
+            [37.4072019010901, 126.971491422795,'<div style="padding:5px;">오투닭갈비 안양동편점</div>'],
+            [37.4008234217854, 126.974782664092,'<div style="padding:5px;">뚝섬 일호돼지갈비</div>'],
+            [37.3990432726191, 126.962256206429,'<div style="padding:5px;">아라숯불닭갈비&쭈꾸미 평촌점</div>'],
+            [37.4010635562687, 126.969135544977,'<div style="padding:5px;">홍춘천치즈닭갈비 관양점</div>'],
+            [37.399328060253, 126.976400439734,'<div style="padding:5px;">백암집</div>'],
+            [37.4013678110587, 126.975604693829,'<div style="padding:5px;">와라와라 인덕원점</div>']
+            [37.4027305288161, 126.963135314606,'<div style="padding:5px;">춘천닭갈비</div>']
+        ]
+
+        var markers = [];
+
+
+        for (var i =0; i < resturant_location.length; i++)
+        {   
+		// 지도에 마커를 생성하고 표시한다
+		    var marker = new kakao.maps.Marker({
+		        position: new kakao.maps.LatLng(resturant_location[i][0],resturant_location[i][1]), // 마커의 좌표
+		        map: map // 마커를 표시할 지도 객체
+		    });
+     
+        // 인포윈도우를 생성합니다
+            var infowindow = new kakao.maps.InfoWindow({
+                content : resturant_location[i][2] 
+            });
+            // 마커 위에 인포윈도우를 표시합니다. 두번째 파라미터인 marker를 넣어주지 않으면 지도 위에 표시됩니다
+            infowindow.open(map, marker); 
+            markers.push(marker);
+        }
+        clusterer.addMarkers(markers);
+
+	</script>
+</body>
+</html>
\ No newline at end of file