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

<aside> 💡 본 예제를 실습하기 위해선 google map api Key가 필요합니다. api key 발급 사이트 : https://developers.google.com/maps api key 생성 가이드 : https://developers.google.com/maps/documentation/routes/get-api-key

</aside>

1. google map 생성영역 생성

google map을 생성해주기 위해서는 <div></div> 영역이 필요합니다.

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

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

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

2. 이벤트 등록하기

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

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

2-1 google map API 스크립트 로드하기

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

함수자동생성 → Flex유틸 → Web → 라이브러리를 선택하고 아래와같이 넣고 생성할 수 있습니다. 스크립트URL : https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&libraries=places