[FAQ] 지도/로컬 API 문의 전 꼭 읽어 주세요.
https://devtalk.kakao.com/t/faq-api/125610
검색을 통해 키워드를 기반으로 카카오맵을 보여주는 사이트인데 API KEY를 발급받고 지도까지는 완성했으나 검색 결과로 나온 마커를 클릭하면 인포윈도우가 나타나지 않습니다
검토를 수차례 해봤지만 도저히 모르겠어서 도움 요청 하고자 합니다…
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<form id="search-form" style="text-align: center">
<input type="text" id="keyword-input" placeholder="키워드를 입력하세요" />
<button type="submit">검색</button>
</form>
<hr>
<div id="map" style="width: 70%; height: 350px; margin-left: auto; margin-right: auto"></div>
<script type="text/javascript" src="//dapi.kakao.com/v2/maps/sdk.js?appkey=_________&libraries=services"></script>
<script>
document.getElementById("search-form").addEventListener("submit", function (event) {
event.preventDefault(); // 폼 제출 방지
// 사용자가 입력한 키워드 가져오기
var keyword = document.getElementById("keyword-input").value;
// Kakao Map API 사용하여 지도 표시
var container = document.getElementById("map");
var options = {
center: new kakao.maps.LatLng(33.5665, 126.978), // 지도의 중심 좌표 설정
level: 8, // 지도의 확대 레벨 설정
};
// 지도를 생성합니다
var map = new kakao.maps.Map(container, options);
// 장소 검색 객체를 생성합니다
var places = new kakao.maps.services.Places();
// 키워드로 장소를 검색합니다
places.keywordSearch(keyword, function (result, status) {
if (status === kakao.maps.services.Status.OK) {
var bounds = new kakao.maps.LatLngBounds();
for (var i = 0; i < result.length; i++) {
var point = new kakao.maps.LatLng(result[i].y, result[i].x);
var marker = new kakao.maps.Marker({ position: point });
marker.setMap(map);
bounds.extend(new kakao.maps.LatLng(result[i].y, result[i].x));
}
map.setBounds(bounds);
// 검색된 장소 위치를 기준으로 지도 범위를 재설정합니다
// 검색 결과를 처리하는 코드 작성
}
});
});
// 지도에 마커를 표시하는 함수입니다
function displayMarker(place) {
// 마커를 생성하고 지도에 표시합니다
var 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 infowindow = new kakao.maps.InfoWindow({ zIndex: 1 });
var mapContainer = document.getElementById("map"), // 지도를 표시할 div
mapOption = {
center: new kakao.maps.LatLng(37.566826, 126.9786567), // 지도의 중심좌표
level: 3, // 지도의 확대 레벨
};
// 키워드 검색 완료 시 호출되는 콜백함수 입니다
function placesSearchCB(data, status, pagination) {
if (status === kakao.maps.services.Status.OK) {
// 검색된 장소 위치를 기준으로 지도 범위를 재설정하기위해
// LatLngBounds 객체에 좌표를 추가합니다
var bounds = new kakao.maps.LatLngBounds();
for (var i = 0; i < data.length; i++) {
displayMarker(data[i]);
bounds.extend(new kakao.maps.LatLng(data[i].y, data[i].x));
}
// 검색된 장소 위치를 기준으로 지도 범위를 재설정합니다
map.setBounds(bounds);
}
}
</script>
</body>
</html>