다음지도 Kakao API 전환 관련 문의 드립니다

내년부터 다음지도 api를 못쓴다고 공지를 받았는데요

저희 홈페이지 개발자가 일을 그만둬서 수정을 못해 준다고 하네요…ㅠㅠ

혹시 지금 쓰는 것에서 뭐를 고쳐야 하는지 알려주세요

ASP에 대한 지식이 없어서요

밑에 있는 것이 지금쓰고 있는 소스입니다.

Kakao 앱키는 새로 받았는데요

바뀐 키만 입력했더니 지도가 나오질 않네요 ㅠㅠ

<!DOCTYPE html>
<html>
<head>
	<meta charset="euc-kr">

<title>다음 지도 API</title>

<%
addr= request("addr")
%>
</head>
<body style="padding:0;margin:0;">
<div id="map" style="width:300px;height:260px;padding:0;margin:0;"></div>
<script type="text/javascript" src="//dapi.kakao.com/v2/maps/sdk.js?appkey=발급받은 APP KEY를 넣으시면 됩니다."></script>
<script>
// 주소-좌표 변환 객체를 생성합니다
var geocoder = new daum.maps.services.Geocoder();
// 주소로 좌표를 검색합니다
geocoder.addr2coord('<%= addr %>', function(status, result) {
// 정상적으로 검색이 완료됐으면 
if (status === daum.maps.services.Status.OK) {
var coords = new daum.maps.LatLng(result.addr[0].lat, result.addr[0].lng);
var mapContainer = document.getElementById('map'), // 지도를 표시할 div 
mapOption = {
center: new daum.maps.LatLng(result.addr[0].lat, result.addr[0].lng), // 지도의 중심좌표
level: 4, // 지도의 확대 레벨
mapTypeId: daum.maps.MapTypeId.ROADMAP // 지도종류
};  
// 지도를 생성합니다    
var map = new daum.maps.Map(mapContainer, mapOption); 
// 지도에 확대 축소 컨트롤을 생성한다
var zoomControl = new daum.maps.ZoomControl();
// 지도의 우측에 확대 축소 컨트롤을 추가한다
map.addControl(zoomControl, daum.maps.ControlPosition.RIGHT);
// 지도에 마커를 생성하고 표시한다
var marker = new daum.maps.Marker({
position: new daum.maps.LatLng(result.addr[0].lat, result.addr[0].lng), // 마커의 좌표 (위도 
(latitude), 경도(longitude))
map: map // 마커를 표시할 지도 객체
});
} 
});
	</script>
</body>
</html>

geocoder.addr2coord(’<%= addr %>’, function(status, result) {

이부분은

geocoder.addressSearch(’<%= addr %>’, function(result, status) {

이렇게 고쳤고요…

여기서 가장 문제가 되는것이

new daum.maps.LatLng(result.addr[0].lat, result.addr[0].lng)

요부분인거 같은데요…어떻게 고쳐야 하는건가요?

일단 js 를 로드할 때 libraries=services 파라미터가 빠져 있습니다.

그리고 addressSearch 사용 관련은 아래의 가이드를 참고하세요.
http://apis.map.daum.net/web/sample/addr2coord/

libraries=services 는 예시에서 빠져있지만…

소스에는 키값 다음에 추가되어 있습니다…

var coords = new daum.maps.LatLng(result.addr[0].lat, result.addr[0].lng)

이값을 링크되어 있는 예문을 보고(var coords = new daum.maps.LatLng(result[0].y, result[0].x):wink:

var coords = new daum.maps.LatLng(result.addr[0].y, result.addr[0].x)

라고 고쳤는데…지도가 나오질 않습니다… ㅠㅠ

이부분은 초보자인 저에게는 어떻게 해야 하는지 알수가 없네요…ㅠㅠ

가장 모르겠는 부분이

addr= request(“addr”) 값을

어떻게 var coords = new daum.maps.LatLng(result[0].y, result[0].x);

이부분에 적용할수 있는가입니다…

기존 소스를 보면

var coords = new daum.maps.LatLng(result.addr[0].lat, result.addr[0].lng)

이렇게 되어 있는데…

새로운 소스에 적용할때

var coords = new daum.maps.LatLng(result.addr[0].y, result.addr[0].x)

이걸로는 안되는거 같아서요 ㅠㅠ

우선 브라우저 콘솔에 뜨는 오류 메세지를 확인해 주세요.

var geocoder = new daum.maps.services.Geocoder();

geocoder.addressSearch('제주특별자치도 제주시 첨단로 242', function(result, status) {

  if (status === daum.maps.services.Status.OK) {
      
    var mapContainer = document.getElementById('map'),
          mapOption = {
            center: new daum.maps.LatLng(result[0].y, result[0].x),
            level: 4,
            mapTypeId: daum.maps.MapTypeId.ROADMAP
    };  

    var map = new daum.maps.Map(mapContainer, mapOption); 

    var zoomControl = new daum.maps.ZoomControl();

    map.addControl(zoomControl, daum.maps.ControlPosition.RIGHT);
 
    var marker = new daum.maps.Marker({
      position: new daum.maps.LatLng(result[0].y, result[0].x),
      map: map
    });
  } 
});