[Ionic+Vue3] 네이버지도 API 연동하기 (feat. typescript)

Ionic + Vue3 + Typescript 환경으로 모바일 크로스플랫폼 앱을 개발하면서 필요한 내용을 정리해본다.

 

지도 연동은 매우 빈번하게 사용하는 기능 중 하나이다.

오늘은 가장 보편적으로 사용되는 네이버지도 API를 연동해보도록 하겠다.

 

1. 네이버지도 API Key 발급 받기

https://www.ncloud.com/product/applicationService/maps

NAVER CLOUD PLATFORM

위 페이지로 가서 네이버지도 사용 등록 및 키를 받도록 한다.

 

2. https://console.ncloud.com/naver-service/application

이 링크로 이동하여 인증 정보 버튼을 누르면 아래와 같이 필요한 키를 얻을 수 있다.

 

3. https://navermaps.github.io/maps.js.ncp/docs/tutorial-2-Getting-Started.html

NAVER Maps API v3

이 링크로 들어가면 개발 가이드 및 데모를 볼 수 있다.

 

4. https://navermaps.github.io/maps.js.ncp/docs/tutorial-3-Using-TypeScript.html

NAVER Maps API v3

이 링크의 TypeScript 적용 방법을 적용하도록 한다.

Vscode에서 프로젝트 오픈하고, 터미널을 열어서 npm i -D @types/navermaps 를 입력하면 필요한 타입 정의가 설치된다.

 

5. VScode 에서 vue 코드 작성

<template>
  <div id="map" style="width: 100%; height: 100%"></div>
</template>

<script setup lang="ts">
const script = document.createElement("script");
script.src =
  "https://oapi.map.naver.com/openapi/v3/maps.js?ncpClientId=위에서 발급받은 키";
script.async = true;
script.defer = true;
document.head.appendChild(script);
script.onload = () => {
  new naver.maps.Map("map", {
    center: new naver.maps.LatLng(37.5670135, 126.978374),
    zoom: 10,
  });
};
</script>

 

6. 5번에서 만든 vue 파일을 필요한 곳에 import 하여 사용한다.

    여기서 주의할 점은 네이버지도는 로딩이 끝난 시점에 import 를 해야 지도가 표시되기 때문에 가급적 제일 하단부에 로딩할 수 있도록 위치 시켜야 한다.

<template>
  <ion-page>
    <ion-header>
      <ion-toolbar>
        <ion-title>Tab 1</ion-title>
      </ion-toolbar>
    </ion-header>
    <ion-content :fullscreen="true">
      <ion-header collapse="condense">
        <ion-toolbar>
          <ion-title size="large">Tab 1</ion-title>
        </ion-toolbar>
      </ion-header>
    </ion-content>
  <NaverMapView/>
  </ion-page>
</template>

<script setup lang="ts">
import {
  IonPage,
  IonHeader,
  IonToolbar,
  IonTitle,
  IonContent,
} from "@ionic/vue";
import NaverMapView from "@/components/NaverMapView.vue";
</script>

 

이렇게만 코딩하면 네이버지도가 잘 표시되는 것을 볼 수 있다.

 

모두 즐코딩!