ODsay LAB

개발자포럼(Developer Forum)

네이버 지도 Open API 인증 실패 Web 조회수 1,016 댓글 2 2024-06-10 14:50:02

superBaedal

* API 에러가 발생하는 경우 아래 사항을 알려주시면 보다 빠른 확인이 가능합니다.
  (Enter information for quick resolution when API error occurs)

  - 애플리케이션 명 (Application Name) : HackathonPolice
  - 플랫폼 명 (Platform Name) : 
  - 호출 Full URL (Call Full URL) : 

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no">
    <title>길찾기 결과 지도에 표출하기</title>
</head>
<body>
<div id="map" style="width:100%;height:400px;"></div>
<!-- Naver Developers에서 발급받은 네이버지도 Application Key 입력  -->
<script type="text/javascript" src="https://oapi.map.naver.com/openapi/v3/maps.js?clientId={YOUR_CLIENT_ID}"></script>

<script>
 
	var mapOptions = {
		center: new naver.maps.LatLng(37.3595704, 127.105399),
		zoom: 10
	};

	var map = new naver.maps.Map('map', mapOptions);
	
	var sx = 126.93737555322481;
	var sy = 37.55525165729346;
	var ex = 126.88265238619182;
	var ey = 37.481440035175375;
	
	function searchPubTransPathAJAX() {
		var xhr = new XMLHttpRequest();
		//ODsay apiKey 입력
		var url = "https://api.odsay.com/v1/api/searchPubTransPathT?SX="+sx+"&SY="+sy+"&EX="+ex+"&EY="+ey+"&apiKey={YOUR_API_KEY}";
		xhr.open("GET", url, true);
		xhr.send();
		xhr.onreadystatechange = function() {
			if (xhr.readyState == 4 && xhr.status == 200) {
			console.log( JSON.parse(xhr.responseText) ); // <- xhr.responseText 로 결과를 가져올 수 있음
			//노선그래픽 데이터 호출
			callMapObjApiAJAX((JSON.parse(xhr.responseText))["result"]["path"][0].info.mapObj);
			}
		}
	}
	
	//길찾기 API 호출
	searchPubTransPathAJAX();
	
	function callMapObjApiAJAX(mabObj){
		var xhr = new XMLHttpRequest();
		//ODsay apiKey 입력
		var url = "https://api.odsay.com/v1/api/loadLane?mapObject=0:0@"+mabObj+"&apiKey={YOUR_API_KEY}";
		xhr.open("GET", url, true);
		xhr.send();
		xhr.onreadystatechange = function() {
			if (xhr.readyState == 4 && xhr.status == 200) {
				var resultJsonData = JSON.parse(xhr.responseText);
				drawNaverMarker(sx,sy);					// 출발지 마커 표시
				drawNaverMarker(ex,ey);					// 도착지 마커 표시
				drawNaverPolyLine(resultJsonData);		// 노선그래픽데이터 지도위 표시
				// boundary 데이터가 있을경우, 해당 boundary로 지도이동
				if(resultJsonData.result.boundary){
						var boundary = new naver.maps.LatLngBounds(
				                new naver.maps.LatLng(resultJsonData.result.boundary.top, resultJsonData.result.boundary.left),
				                new naver.maps.LatLng(resultJsonData.result.boundary.bottom, resultJsonData.result.boundary.right)
				                );
						map.panToBounds(boundary);
				}
			}
		}
	}
	
	// 지도위 마커 표시해주는 함수
	function drawNaverMarker(x,y){
		var marker = new naver.maps.Marker({
		    position: new naver.maps.LatLng(y, x),
		    map: map
		});
	}
	
	// 노선그래픽 데이터를 이용하여 지도위 폴리라인 그려주는 함수
	function drawNaverPolyLine(data){
		var lineArray;
		
		for(var i = 0 ; i < data.result.lane.length; i++){
			for(var j=0 ; j <data.result.lane[i].section.length; j++){
				lineArray = null;
				lineArray = new Array();
				for(var k=0 ; k < data.result.lane[i].section[j].graphPos.length; k++){
					lineArray.push(new naver.maps.LatLng(data.result.lane[i].section[j].graphPos[k].y, data.result.lane[i].section[j].graphPos[k].x));
				}
				
			//지하철결과의 경우 노선에 따른 라인색상 지정하는 부분 (1,2호선의 경우만 예로 들음)
				if(data.result.lane[i].type == 1){
					var polyline = new naver.maps.Polyline({
					    map: map,
					    path: lineArray,
					    strokeWeight: 3,
					    strokeColor: '#003499'
					});
				}else if(data.result.lane[i].type == 2){
					var polyline = new naver.maps.Polyline({
					    map: map,
					    path: lineArray,
					    strokeWeight: 3,
					    strokeColor: '#37b42d'
					});
				}else{
					var polyline = new naver.maps.Polyline({
					    map: map,
					    path: lineArray,
					    strokeWeight: 3
					});
				}
			}
		}
	}
</script>
</body>
</html>

HTML에 javascript로 길찾기 API를 호출하고 그 결과를 화면에 보여주는 HTML 예시 코드 실행 오류 관련 문의입니다.
콘솔창에서 확인해 보니 결과값은 정상적으로 호출이 되는데, 네이버 지도 Open API인증을 계속 실패합니다.
네이버 지도 api client id는 중괄호빼고 제대로 입력해줬음에도, 문제가 생깁니다. 도움 주시면 감사드리겠습니다.

글목록

댓글 2

whcho2024-06-10 15:13:35

안녕하세요 superBaedal님
ODsay 관리자입니다.

일단 문의 주신 네이버 지도 Open API 인증 문제 저희 서비스와는 무관한 부분입니다.
해당 부분은 네이버 지도를 웹 화면에 띄우는 부분이고 관련해서 저희 서비스와는 별개로 네이버 클라우드 플랫폼에 지도 API 사용 신청하셔야 되는 부분 입니다.
'https://oapi.map.naver.com/openapi/v3/maps.js?clientId={YOUR_CLIENT_ID}' 이 URL 로 네이버 지도 호출이 되는지 네이버 지도 api 제공하는 측에 문의를 해보셔야 될 것 같습니다.

감사합니다.
Discover your routes, ODsay!

superBaedal2024-06-10 15:38:25
```
답변 감사합니다.
```
등록