이번 과정을 통해 네이버지도 API를 사용해서 시나리오에 현재위치를 기준으로 지도를 보여주는 방법을 알아보겠습니다.

<aside> 💡 본 예제를 실습하기 위해선 네이버 클라이언트 아이디(Clent ID)가 필요합니다. 클라이언트 아이드 발급 사이트 : https://www.ncloud.com/

</aside>

1. 네이버 지도 생성영역 생성

네이버 지도를 생성해주기 위해서는 <div></div> 영역이 필요합니다.

• <div></div> 영역을 생성해주기 위해서는 지도를 생성하려고 하는 레이아웃에 Embed 컨트롤을 생성하고 Embed HTML부분에 아래와같이 추가해줍니다.

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

• embed 컨트롤의 기본 높이는 100px입니다. 디자인 탭에서 이를 300px로 수정하도록 합니다.

2. 이벤트 등록하기

현재 위치를 기반으로 지도를 보여주기 위해서는 다음과 같이 3단계로 구성됩니다

1. 네이버지도 API v3 스크립트 로드: 먼저 네이버지도 API v3의 스크립트를 로드해야 합니다.
2. 현재 위치정보 가져오기: **f.Native.getGPS**를 사용하여 현재 위치 정보를 가져옵니다.
3. 현재 위치정보를 기반으로 지도 생성: 현재 위치 정보를 기반으로 naver.maps.Map 객체를 생성하여 지도를 표시합니다.

2-1 네이버 지도 API v3 스크립트 로드하기

외부 Script 로드하기를 활용하여 네이버지도 API 스크립트를 로드하고 GetGPS 이벤트를 실행시켜주는 Init_NaverMap 이벤트를 생성해줍니다.