2. 이벤트 구성하기

Google Maps 라이브러리를 활용하여 사용자의 현재 위치를 기준으로 지도를 그리는 방법에 대해 알아보겠습니다.

개발하기

Google Map을 사용하여 사용자의 현재 위치를 기준으로 지도를 로드하려면 다음 과정을 따라야 합니다.

Google Maps API 라이브러리 로드 - Load_GoogleMapScript
사용자 위치정보 수집 - getGPS
지도 생성 - Load_GoogleMap

본 실습을 위해서는 [심화실습]-[Google Map 그려주기]에서 발급받은 API 키가 필요합니다.

Google Maps API 라이브러리 로드

Google Map을 사용하기 위해서는 먼저 Google Maps JavaScript API 라이브러리를 로드하는 이벤트를 Load_GoogleMapScript로 생성해 주도록 하겠습니다.

Flextudio의 기능 중 f.Script.load() 함수를 사용하여 외부 스크립트 라이브러리를 로드할 수 있습니다. 또한 함수자동생성 → Flex유틸 → 라이브러리를 선택을 통해 아래와 같이 간단하게 생성할 수 있습니다.

스크립트 URL:Google Maps JavaScript API를 로드하기 위한 URL을 지정합니다. 이 URL의 YOUR_API_KEY 부분에는 실제로 발급받은 Google Maps API 키를 입력해야 합니다.

https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&libraries=places

로드 후 실행 이벤트: 라이브러리 로드 후 실행할 이벤트를 지정합니다. 이 실습에서는 GetGPS라는 이벤트를 설정하여, 라이브러리가 로드된 후 사용자의 위치 정보를 수집하는 기능을 바로 시작할 수 있도록 합니다.
요청 후 대기여부: 스크립트 로드가 동기적으로 실행될지, 비동기적으로 실행될지를 선택할 수 있습니다. 비동기 실행을 통해 페이지 로딩 시간에 영향을 주지 않고, 백그라운드에서 스크립트를 로드할 수 있습니다.
이 실습에서는 체크를 해제하여 스크립트 로드가 비동기적으로 실행되도록 합니다.

이러한 설정을 완료하고 나면, 자동으로 Google Maps API를 로드하는 함수를 생성합니다. 이 함수는 외부 스크립트를 효율적으로 로드하고, 설정된 이벤트를 적절히 트리거할 수 있도록 구성됩니다.

생성된 스크립트

f.Script.load('https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&libraries=places','GetGPS',null);

현재 위치정보 가져오기

사용자의 위치정보을 가져오는 이벤트를 GetGPS로 생성해주도록 하겠습니다.

Flextudio의 기능 중 f.Native.getGPS() 함수를 사용하여 사용자의 위치정보를 가져올 수 있습니다. 또한 함수자동생성 → 모바일 기능 → GPS를 선택을 통해 아래와 같이 간단하게 생성할 수 있습니다.

요청 후 대기여부: 스크립트 로드가 동기적으로 실행될지, 비동기적으로 실행될지를 선택할 수 있습니다. 비동기 실행을 통해 페이지 로딩 시간에 영향을 주지 않고, 백그라운드에서 스크립트를 로드할 수 있습니다.

이 실습에서는 체크를 해제하여 스크립트 로드가 비동기적으로 실행되도록 합니다.

실행 이벤트: 사용자 위치정보를 수집한 후 실행될 이벤트를 지정합니다. 이 실습에서는 Load_GoogleMap라는 이벤트를 설정해여, 사용자 위치정보를 수집한 후 지도를 그려주는 이벤트가 실행되도록 합니다.

이러한 설정을 완료하고 나면, 자동으로 사용자 위치정보를 수집하는 함수를 생성합니다. 이 함수는 사용자 위치정보를 수집하고, 설정된 이벤트를 적절히 트리거할 수 있도록 구성됩니다.

생성된 스크립트

f.Native.getGPS(null,'Load_GoogleMap',true);

현재 위치정보를 기반으로 지도 생성

받아온 위치정보를 기반으로 Embed에 생성한 컨테이너 객체에 지도를 그려주는 이벤트를 Load_GoogleMap 로 생성해주도록 하겠습니다.

f.Native.getGPS() 를 사용하여 가져온 사용자의 위치 정보는 f.GPS(링크예정) 객체를 통해 접근할 수 있으며, 해당 객체에서 위도와 경도 값을 추출할 수 있습니다.

스크립트를 통해 f.GPS값을 활용하여 Embed에 생성한 div에 지도를 그려주도록 하겠습니다.

만약 GPS 값이 제대로 수집되지 않는경우 지도를 그려주기위해 값이 없는경우 고정값을 기준으로 지도가 그려지도록 position을 생성해줍니다.

// 수집된 위치 정보를 사용하여 지도의 중심점을 정의할 position 객체를 생성합니다. 
let position = {
    lat: Number(f.GPS.latitude || 37.557),
    lng:Number(f.GPS.longitude || 126.864111)
};
// google.maps.Map 객체를 생성하여 Embed에 추가한 div 컨테이너에 지도를 그립니다.
// 지도의 중심은 position 객체에 정의된 위치를 사용하고, 확대 수준(zoom level)을 설정합니다.
let googleMap = new google.maps.Map(document.getElementById('googleMap'), {
    center: position,
    zoom: 14
});
// 사용자의 위치를 나타내는 마커를 지도에 추가합니다. 마커는 position 객체에 지정된 위치에 생성됩니다.
let marker = new google.maps.Marker({
    position: position,
    map: googleMap
});