Flutter 앱에서 “지도” 기능은 한 번쯤 꼭 구현하게 되는 필수 요소입니다.
특히 실시간 위치 추적, 경로 안내, 마커 표시 등은 배달, 택시, 포인트 위치 기반 서비스에서 빠질 수 없죠.
여기서 구글맵을 이용한 실시간 위치 추적, 마커, 폴리라인(경로선) 표시까지 한 번에 구현하는 과정을 완전히 정리해드립니다.
개발자라면 누적 12,000명 이상 시청한 영상 핵심만 뽑아, 실무에서 바로 쓸 수 있게 설명드릴게요!
1. 구글맵 API 키, “설정 하나면” 막힘 없음
먼저 Google Cloud Platform에 접속해 API 키를 발급받아야 합니다.
API 키는 무료 크레딧이 제공되니, 테스트 걱정은 잠시 내려놓으셔도 됩니다.
여기서 주의할 점은 Maps SDK for Android, iOS, JavaScript를 “모두” 활성화해야 Flutter에서 완벽 구동이 가능합니다.
- Android: SDK 21 이상 /
AndroidManifest.xml에 키 입력 - iOS:
AppDelegate.swift파일에 API 키 등록 (코드 없이 설정만 진행하면 끝!)
이렇게 플랫폼별 초기 세팅을 마치면 복잡한 절차 없이 구글맵 사용 기반이 마련됩니다.
2. 실무에서 꼭 쓰는 패키지 세 가지
구글맵·위치·경로 표시까지 한 번에 쓸 핵심 패키지는 아래 세 가지입니다.
google_maps_flutter: 지도 출력 및 마커·경로location: 현재 위치 추적 및 권한 제어flutter_polyline_points: 두 지점 간 “실제 도로 경로” 좌표 가져오기
pubspec.yaml에 추가만 하면 코드 작성은 바로 시작할 수 있습니다.
3. GoogleMap 위젯 “구조 잡기의 핵심”
Flutter에서 지도는 GoogleMap 위젯으로 출력합니다.
여기서 중요한 속성은 바로 초기 위치(CameraPosition), 마커(Set\), 폴리라인(Set\) 관리입니다.
- 마커는 Set 자료구조로 ID, 위치정보(위도경도), 기본 아이콘 등을 등록
- CameraPosition으로 지도 첫 화면 위치 및 줌 단계 결정
처음에는 대표위치(예: 구글플렉스)를 CameraPosition으로 배치하고,
여러 마커를 추가하여 각 지점의 좌표를 시각적으로 표현합니다.
4. 실시간 위치, 권한 처리 노하우
앱에서 “실시간 위치” 추적은 단순 GPS 호출만으로 끝나지 않습니다.
안드로이드와 iOS 모두 “위치 권한” 처리가 선행되어야 하며,
권한 거절·미허용 상황까지 체크하는 로직이 매우 중요합니다.
- AndroidManifest 및 Info.plist에 권한 관련 코드를 미리 입력
location패키지로 서비스/권한 활성 상태 체크 → 미승인시 별도 요청 로직 삽입- 권한 승인 뒤에는 onLocationChanged 리스너로 위치 변화 감지, 마커 자동 갱신
이 과정을 통해 사용자는 언제든지 자신의 실시간 위치를 앱 내에서 확인할 수 있습니다.
5. 마커, 폴리라인, 실시간 갱신까지 한 번에
출발지와 도착지 두 곳에 마커를 입력하면,
이제 polyline(경로선)으로 도로 경로를 지도에 표시할 수 있습니다.
flutter_polyline_points로 출발지~도착지 실제 경로 좌표를 받아옴- GoogleMap 위젯의 polylines 속성에 Set\<Polyline> 전달하여 지도상 경로 표시
- 실시간 위치가 변할 때 마커도 함께 이동, 경로 역시 동적으로 재생성 가능
또한 에뮬레이터에서는 경로 재생, 이동 속도 조절, 위치 변경 등의 시뮬레이션 기능을 통해
현실과 아주 유사한 테스트가 가능합니다.
6. 한 번의 구조로 여러 위치 서비스 개발도 가능
이 구조를 잘 이해하면 배달 앱, 실시간 위치동의 출입관리, 경로 탐색 기반 서비스에
최소한의 구조 변경만으로 확장 적용이 가능합니다.
특히 폴리라인, 마커, 권한 제어 코드는 모듈화해서 유지보수와 재사용성도 확보할 수 있습니다.
Flutter로 실시간 지도 서비스, 이제 10분만에 구현 가능합니다!
플랫폼 연동, 권한 처리, 경로 표시까지 한 번에 끝내고 싶다면 반드시 활용해보세요.