[FAQ] 지도/로컬 API 문의 전 꼭 읽어 주세요.
<%@ page contentType=“text/html; charset=UTF-8” pageEncoding=“UTF-8” %> 모임 장소 지도 body { font-family: Arial, sans-serif; } #map { width: 100%; height: 500px; margin-top: 10px; border: 1px solid #ccc; border-radius: 5px; } #result-list { margin-top: 10px; padding: 10px; border: 1px solid #ccc; border-radius: 5px; max-height: 150px; overflow-y: auto; } .result-item { cursor: pointer; padding: 5px; margin-bottom: 5px; border: 1px solid #ddd; border-radius: 5px; } .result-item:hover { background-color: #f0f0f0; } #pagination { margin-top: 10px; text-align: center; } #pagination a { margin: 0 5px; cursor: pointer; } #pagination a.on { font-weight: bold; }
모임 장소
키워드 검색
<script>
var mapContainer = document.getElementById('map');
var mapOption = { center: new kakao.maps.LatLng(37.566826, 126.9786567), level: 3 };
var map = new kakao.maps.Map(mapContainer, mapOption);
var ps = new kakao.maps.services.Places();
var infowindow = new kakao.maps.InfoWindow({ zIndex: 1 });
var markers = [];
// 현위치 표시
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(function (position) {
var locPosition = new kakao.maps.LatLng(position.coords.latitude, position.coords.longitude);
addMarker(locPosition, '현위치');
map.setCenter(locPosition);
});
}
// 키워드 검색
function searchPlaces() {
var keyword = document.getElementById('keyword').value.trim();
if (!keyword) { alert("검색어를 입력하세요."); return; }
ps.keywordSearch(keyword, placesSearchCB);
}
// 검색 결과 콜백
function placesSearchCB(data, status, pagination) {
if (status === kakao.maps.services.Status.OK) {
displayPlaces(data);
displayPagination(pagination);
} else {
alert("검색 결과가 없습니다.");
}
}
// 장소와 마커 표시
function displayPlaces(places) {
clearMarkers();
var resultList = document.getElementById("result-list");
resultList.innerHTML = "";
var bounds = new kakao.maps.LatLngBounds();
places.forEach((place, index) => {
var placeName = place.place_name || "장소 이름 없음"; // 이름이 없으면 대체 텍스트 사용
var coords = new kakao.maps.LatLng(place.y, place.x);
var marker = addMarker(coords, placeName); // 마커에 placeName 전달
// 결과 리스트 생성
const item = document.createElement("div");
item.className = "result-item";
item.innerHTML = `${index + 1}. <strong>${placeName}</strong>`;
resultList.appendChild(item);
bounds.extend(coords);
item.onclick = () => {
map.setCenter(coords);
showInfoWindow(marker, placeName);
};
});
map.setBounds(bounds);
}
// 마커 추가
function addMarker(position, placeName) {
const marker = new kakao.maps.Marker({ position, map });
markers.push(marker);
kakao.maps.event.addListener(marker, "click", () => {
console.log("클릭된 장소 이름:", placeName); // 디버깅: 장소 이름 확인
showInfoWindow(marker, placeName);
});
return marker;
}
// 인포윈도우 표시
function showInfoWindow(marker, placeName) {
if (!placeName) placeName = "이름 없음"; // 빈 값 방지
infowindow.setContent(`
<div style="padding:10px; font-size:12px;">
<strong>${placeName}</strong>
</div>
`);
infowindow.open(map, marker);
}
// 마커 초기화
function clearMarkers() {
markers.forEach(marker => marker.setMap(null));
markers = [];
}
// 페이지네이션 표시
function displayPagination(pagination) {
const paginationEl = document.getElementById("pagination");
paginationEl.innerHTML = "";
for (let i = 1; i <= pagination.last; i++) {
const el = document.createElement("a");
el.href = "#";
el.innerHTML = i;
if (i === pagination.current) {
el.className = "on";
} else {
el.onclick = (function (i) {
return function (e) {
e.preventDefault();
pagination.gotoPage(i);
};
})(i);
}
paginationEl.appendChild(el);
}
}
</script>
