약도스킨 베이스 게시물 주소를 네이버 지도 api 연동하는데 표시가 제대로 안되고있습니다.
본문
https://sir.kr/g5_skin/24249?sfl=wr_subject&stx=%EC%95%BD%EB%8F%84
해당 소스 참고하여 작업중입니다!
게시물 작성 시 주소도 wr_5필드에 제대로 들어가는데 지도는 뜨나 wr_5에 입력되어있는 주소를 찾아가질 못하네요.
return alert(myaddress + '의 검색 결과가 없거나 기타 네트워크 에러'); myaddress 값으로 문제없이 들어가고 있습니다. // alert창 확인
콘솔창에도 오류는 뜨지 않고 있습니다.
네이버 api 호출 누적은 정상적으로 카운트 됩니다.
도움 요청드립니다.
<!-- 약도 -->
<script type="text/javascript" src="https://oapi.map.naver.com/openapi/v3/maps.js?ncpKeyId=네이버ID&submodules=geocoder"></script>
<script type="text/javascript" src="https://oapi.map.naver.com/openapi/v3/maps-panorama.js"></script>
<div id="map" style="width:71%;height:300px;"></div>
<script>
var map = new naver.maps.Map('map');
var myaddress = '<?=$view['wr_5']?>';// 도로명 주소나 지번 주소만 가능 (건물명 불가!!!!)
naver.maps.Service.geocode({address: myaddress}, function(status, response) {
if (status === naver.maps.Service.Status.ERROR) {
return alert(myaddress + '의 검색 결과가 없거나 기타 네트워크 에러');
}
var result = response.result;
// 검색 결과 갯수: result.total
// 첫번째 결과 결과 주소: result.items[0].address
// 첫번째 검색 결과 좌표: result.items[0].point.y, result.items[0].point.x
var myaddr = new naver.maps.Point(result.items[0].point.x, result.items[0].point.y);
map.setCenter(myaddr); // 검색된 좌표로 지도 이동
// 마커 표시
var marker = new naver.maps.Marker({
position: myaddr,
map: map
});
// 마커 클릭 이벤트 처리
naver.maps.Event.addListener(marker, "click", function(e) {
if (infowindow.getMap()) {
infowindow.close();
} else {
infowindow.open(map, marker);
}
});
// 마크 클릭시 인포윈도우 오픈
var infowindow = new naver.maps.InfoWindow({
content: '<h4> <?=$view['subject']?></h4>'
});
});
</script>
<!-- 약도 -->
답변 1
아래 코드 한번 참고를 해보시는게 어떠실지요.
<!-- 약도 -->
<script type="text/javascript" src="https://oapi.map.naver.com/openapi/v3/maps.js?ncpKeyId=네이버ID&submodules=geocoder"></script>
<script type="text/javascript" src="https://oapi.map.naver.com/openapi/v3/maps-panorama.js"></script>
<div id="map" style="width:71%;height:300px;"></div>
<script>
// 지도 초기화
var map = new naver.maps.Map('map', {
center: new naver.maps.LatLng(37.5665, 126.9780), // 서울 시청 좌표 (기본값)
zoom: 15
});
var myaddress = '<?=addslashes($view['wr_5'])?>';// PHP 문자열 이스케이프 처리
// 주소가 비어있는지 확인
if (!myaddress || myaddress.trim() === '') {
console.log('주소가 입력되지 않았습니다.');
} else {
console.log('검색할 주소:', myaddress); // 디버깅용
// 지오코딩 요청
naver.maps.Service.geocode({
query: myaddress // address 대신 query 사용
}, function(status, response) {
console.log('지오코딩 상태:', status); // 디버깅용
console.log('응답 데이터:', response); // 디버깅용
if (status === naver.maps.Service.Status.ERROR) {
console.error('지오코딩 에러 발생');
return alert(myaddress + '의 검색 결과가 없거나 기타 네트워크 에러');
}
if (status !== naver.maps.Service.Status.OK) {
return alert('지오코딩 서비스 오류');
}
var result = response.v2; // v2 결과 사용
// 결과가 없는 경우 체크
if (!result || !result.addresses || result.addresses.length === 0) {
return alert(myaddress + '의 검색 결과가 없습니다. 정확한 주소를 입력해주세요.');
}
// 첫 번째 결과 사용
var item = result.addresses[0];
var point = new naver.maps.Point(item.x, item.y);
var latlng = new naver.maps.LatLng(item.y, item.x);
// 지도 중심 이동
map.setCenter(latlng);
map.setZoom(16);
// 마커 표시
var marker = new naver.maps.Marker({
position: latlng,
map: map,
title: '<?=addslashes($view['subject'])?>'
});
// 정보창 생성
var infowindow = new naver.maps.InfoWindow({
content: [
'<div style="padding:10px;min-width:200px;line-height:150%;">',
'<h4 style="margin-top:5px;margin-bottom:5px;"><?=addslashes($view['subject'])?></h4>',
'<p style="margin:0;">' + item.roadAddress + '</p>',
'</div>'
].join('')
});
// 마커 클릭 이벤트
naver.maps.Event.addListener(marker, "click", function(e) {
if (infowindow.getMap()) {
infowindow.close();
} else {
infowindow.open(map, marker);
}
});
// 지도 로드 시 정보창 자동 열기 (옵션)
// infowindow.open(map, marker);
});
}
</script>
<!-- 디버깅용 정보 표시 (개발 중에만 사용) -->
<div style="margin-top:10px; padding:10px; background:#f5f5f5; border:1px solid #ddd;">
<strong>디버깅 정보:</strong><br>
입력된 주소: <?=$view['wr_5']?><br>
제목: <?=$view['subject']?>
</div>
<!-- 약도 -->
답변 감사합니다. 해당 소스로 확인해보니 response 값이 undifined 라고 나오는데 제가 뭘 놓치고 있는건지 하나도 모르겠네요.
https://navermaps.github.io/maps.js.ncp/docs/tutorial-Geocoder-Geocoding.html
해당링크 참조해서 하나씩 다시 해봐야겠습니다 ㅠ 답변 감사합니다.
