wlstp8473

map of restaurant location near me

1 +<!DOCTYPE html>
2 +<html>
3 +<head>
4 + <meta charset="utf-8">
5 + <title>다음 지도 API</title>
6 +</head>
7 +<body>
8 + <div id="map" style="width:100%;height:100vh;"></div>
9 +
10 + <script src="https://dapi.kakao.com/v2/maps/sdk.js?appkey=af5d8081362feb3d8c7f7f5a242af361&libraries=clusterer"></script>
11 + <script>
12 + var mapContainer = document.getElementById('map'), // 지도를 표시할 div
13 + mapOption = {
14 + center: new kakao.maps.LatLng(37.4010573010236, 126.97627592909265), // 지도의 중심좌표
15 + level: 4, // 지도의 확대 레벨
16 + mapTypeId : kakao.maps.MapTypeId.ROADMAP // 지도종류
17 + };
18 +
19 + // 지도를 생성한다
20 + var map = new kakao.maps.Map(mapContainer, mapOption);
21 +
22 + // 마커 클러스터러를 생성합니다
23 + var clusterer = new kakao.maps.MarkerClusterer({
24 + map: map, // 마커들을 클러스터로 관리하고 표시할 지도 객체
25 + averageCenter: true, // 클러스터에 포함된 마커들의 평균 위치를 클러스터 마커 위치로 설정
26 + minLevel: 10 // 클러스터 할 최소 지도 레벨
27 + });
28 +
29 + var resturant_location = [
30 + [37.402191246171625, 126.97679939968889,'<div style="padding:5px;">my location!</div>'], //여유가 된다면 파이썬 tele_chatbot_code의 resturant_location을 txt파일로 만들어서 파싱한 후 연결하기
31 + [37.400679329216, 126.975117015358,'<div style="padding:5px;">통나무집춘천닭갈비!</div>'],
32 + [37.4015081640269, 126.974624316623,'<div style="padding:5px;">2.5닭갈비</div>'],
33 + [37.3925702184301, 126.975530754058,'<div style="padding:5px;">박가네춘천닭갈비</div>'],
34 + [37.4072019010901, 126.971491422795,'<div style="padding:5px;">오투닭갈비 안양동편점</div>'],
35 + [37.4008234217854, 126.974782664092,'<div style="padding:5px;">뚝섬 일호돼지갈비</div>'],
36 + [37.3990432726191, 126.962256206429,'<div style="padding:5px;">아라숯불닭갈비&쭈꾸미 평촌점</div>'],
37 + [37.4010635562687, 126.969135544977,'<div style="padding:5px;">홍춘천치즈닭갈비 관양점</div>'],
38 + [37.399328060253, 126.976400439734,'<div style="padding:5px;">백암집</div>'],
39 + [37.4013678110587, 126.975604693829,'<div style="padding:5px;">와라와라 인덕원점</div>']
40 + [37.4027305288161, 126.963135314606,'<div style="padding:5px;">춘천닭갈비</div>']
41 + ]
42 +
43 + var markers = [];
44 +
45 +
46 + for (var i =0; i < resturant_location.length; i++)
47 + {
48 + // 지도에 마커를 생성하고 표시한다
49 + var marker = new kakao.maps.Marker({
50 + position: new kakao.maps.LatLng(resturant_location[i][0],resturant_location[i][1]), // 마커의 좌표
51 + map: map // 마커를 표시할 지도 객체
52 + });
53 +
54 + // 인포윈도우를 생성합니다
55 + var infowindow = new kakao.maps.InfoWindow({
56 + content : resturant_location[i][2]
57 + });
58 + // 마커 위에 인포윈도우를 표시합니다. 두번째 파라미터인 marker를 넣어주지 않으면 지도 위에 표시됩니다
59 + infowindow.open(map, marker);
60 + markers.push(marker);
61 + }
62 + clusterer.addMarkers(markers);
63 +
64 + </script>
65 +</body>
66 +</html>
...\ No newline at end of file ...\ No newline at end of file