[flutter] 플러터(Flutter)에서 지도(Map) 사용하기

플러터(Flutter)는 크로스 플랫폼 앱 개발 도구로, 다양한 기능을 제공합니다. 그 중에서도 지도를 사용하여 사용자 위치를 표시하거나 특정 위치를 표시하는 기능은 매우 중요합니다. 이번에는 플러터에서 지도를 사용하는 방법에 대해 알아보겠습니다.

지도 패키지 선정

플러터에서 지도를 사용하기 위해서는 지도 관련 패키지를 사용해야 합니다. 가장 많이 사용되는 지도 패키지 중 하나는 google_maps_flutter입니다.

dependencies:
  google_maps_flutter: ^2.0.0

pubspec.yaml 파일에 위와 같이 패키지를 추가해줍니다.

API 키 발급

Google 지도를 사용하려면 Google Cloud Platform에서 API 키를 발급받아야 합니다.

  1. Google Cloud 콘솔에 접속합니다. (https://console.cloud.google.com)
  2. 새 프로젝트를 생성합니다.
  3. 생성한 프로젝트에서 “지도”를 선택합니다.
  4. API 및 서비스 > 사용 설정 페이지로 이동합니다.
  5. “지도” > “지도 SDK”를 선택합니다.
  6. 사용자 인증 정보 탭으로 이동합니다.
  7. “사용자 인증 정보 만들기” 버튼을 클릭하고 “API 키”를 선택합니다.
  8. 발급된 API 키를 복사합니다.

지도 위젯 추가

플러터에서 지도를 사용하기 위해 GoogleMap 위젯을 추가해줍니다. API 키를 설정하기 위해서는 GoogleMap 위젯 안에 GoogleMapController를 사용하여 API 키를 설정해야 합니다.

import 'package:google_maps_flutter/google_maps_flutter.dart';

GoogleMap(
  initialCameraPosition: CameraPosition(
    target: LatLng(37.532600, 127.024612),
    zoom: 15,
  ),
  markers: Set<Marker>.from([
    Marker(markerId: MarkerId("marker_1"), position: LatLng(37.532600, 127.024612),),
  ]),
  onMapCreated: (GoogleMapController controller) {
    // API 키 설정
    controller.setMapStyle("your_api_key");
  },
),

위 코드에서 initialCameraPosition을 통해 초기 카메라 위치를 설정하고, markers를 통해 마커를 추가할 수 있습니다. onMapCreated 콜백 함수에서 GoogleMapController를 사용하여 API 키를 설정합니다. 여기서 your_api_key는 앞서 발급 받은 API 키를 입력하면 됩니다.

플러터에서 지도 사용하기

이제 플러터에서 지도를 사용하는 방법에 대해 알아봤습니다. google_maps_flutter 패키지를 추가하고, API 키를 발급받아 GoogleMap 위젯을 사용하여 지도를 추가할 수 있습니다. 지도를 표시하고자 하는 위치에 마커를 추가하여 보다 다양한 기능을 구현할 수 있습니다.

더 자세한 내용은 google_maps_flutter 패키지의 문서를 참고하시기 바랍니다.