[vue.js] 네이버 지도 api 사용하기 (아직 도메인이 없을때)

[vue.js] 네이버 지도 api 사용하기

 

 

1. 기본 셋팅

- 네이버 클라우드 애플리케이션 수정버튼 클릭하기

- 네이버 지도 api만 사용하고자 합니다

Web Dynamic Map 선택하고

- 네이버 map을 올릴 도메인을 적어주세요

일단 개발에서 작업하고 추후 도메인에 올릴예정이니까

본인 로컬서버 추가하고 저장합니다

http://localhost:8080

인증정보 클릭하면 본인의 정보 확인 할 수 있습니다

이제 Client ID를 복사해놓습니다

 

2. vue.js에 적용하기

<template>
  <div id="map"></div>
</template>

<script>
export default {
  mounted() {
    // 네이버 지도 API 로드
    const script = document.createElement("script");
    script.src =
      "https://openapi.map.naver.com/openapi/v3/maps.js?ncpClientId=myId";
    script.async = true;
    script.defer = true;
    document.head.appendChild(script);

    script.onload = () => {
      // 네이버 지도 생성
      new window.naver.maps.Map("map", {
        center: new window.naver.maps.LatLng(37.5670135, 126.9783740),
        zoom: 10
      });
    };
  }
};
</script>

 

네이버 공식 문서에는 clientId 으로 나와있는데 

오류가 발생합니다. ncpClientId으로 해주니까 오류없이 잘 보입니다

 "https://openapi.map.naver.com/openapi/v3/maps.js?ncpClientId=복사한ClientId";

 

 

clientId로 할 경우 아래처럼 

"네이버 지도 Open API 인증이 실패했습니다" 오류가 발생합니다,

네이버 지도 Open API 인증이 실패하였습니다. 클라이언트 아이디와 웹 서비스 URL을 확인해 주세요.,  * Error Code / Error Message: 2 / 서버로 전달된 정보에 오류가 있습니다,