Searching Places by Keyword

임승현
Commit 2cae86d7a88f58f6ac03ed363e91fbf7c3aeb9dc 2cae86d7 1 parent 33b291c2
Showing 1 changed file with 47 additions and 6 deletions
MapAPI/test.html
--- a/MapAPI/test.html
View file @2cae86d
+++ b/MapAPI/test.html
View file @2cae86d
@@ -2,19 +2,60 @@
 <html>
 <head>
 	<meta charset="utf-8"/>
-	<title>Kakao 지도 시작하기</title>
+	<title>키워드로 장소 검색하기</title>
 </head>
 <body>
-	<div id="map" style="width:500px;height:400px;"></div>
+	<div id="map" style="width:100%;height:350px;"></div>
 	<script type="text/javascript" src="//dapi.kakao.com/v2/maps/sdk.js?appkey=c48bde8b1f66c569193a37cbc58d1c87"></script>
 	<script>
-		var container = document.getElementById('map');
+		// 마커를 클릭하면 장소명을 표출할 인포윈도우 입니다
-		var options = {
+		const infowindow = new kakao.maps.InfoWindow({zIndex:1});
-			center: new kakao.maps.LatLng(33.450701, 126.570667),
+		//지도를 표시할 div
+		const container = document.getElementById('map');
+		const options = {
+			center: new kakao.maps.LatLng(37.566826, 126.9786567),
 			level: 3
 		};
+		const map = new kakao.maps.Map(container, options);
+		// 장소 검색 객체를 생성합니다
+		const ps = new kakao.maps.services.Places(); 
+		// 키워드로 장소를 검색합니다
+		ps.keywordSearch('수원 영화관', placesSearchCB);
+
+		// 키워드 검색 완료 시 호출되는 콜백함수 입니다
+		function placesSearchCB (data, status, pagination) {
+			if (status === kakao.maps.services.Status.OK) {
+				// 검색된 장소 위치를 기준으로 지도 범위를 재설정하기위해
+				// LatLngBounds 객체에 좌표를 추가합니다
+				let bounds = new kakao.maps.LatLngBounds();
+
+				for (let i=0; i<data.length; i++) {
+					displayMarker(data[i]);    
+					bounds.extend(new kakao.maps.LatLng(data[i].y, data[i].x));
+				}       
+
+				// 검색된 장소 위치를 기준으로 지도 범위를 재설정합니다
+				map.setBounds(bounds);
+			} 
+		}
+		// 지도에 마커를 표시하는 함수입니다
+		function displayMarker(place) {
+			
+			// 마커를 생성하고 지도에 표시합니다
+			let marker = new kakao.maps.Marker({
+				map: map,
+				position: new kakao.maps.LatLng(place.y, place.x) 
+			});
+
+			// 마커에 클릭이벤트를 등록합니다
+			kakao.maps.event.addListener(marker, 'click', function() {
+				// 마커를 클릭하면 장소명이 인포윈도우에 표출됩니다
+				infowindow.setContent('<div style="padding:5px;font-size:12px;">' + place.place_name + '</div>');
+				infowindow.open(map, marker);
+			});
+		}
+
-		var map = new kakao.maps.Map(container, options);
 	</script>
 </body>
 </html>
\ No newline at end of file