플러터 어플리케이션에서 지도를 사용할 때 지도를 확대하거나 축소하는 기능을 구현하는 방법에 대해 알아보겠습니다.

1. 지도 라이브러리 추가하기

먼저, google_maps_flutter 패키지를 pubspec.yaml 파일에 추가해야 합니다. 아래와 같이 dependencies 섹션에 추가합니다.

dependencies:
  flutter:
    sdk: flutter
  google_maps_flutter: ^2.0.6

2. Google Maps API 키 설정

Google Cloud Console에서 Google Maps 및 Geocoding API를 활성화하고 API 키를 발급받아야 합니다.

3. 지도 위젯 추가하기

다음으로, 확대/축소 기능을 구현할 화면에 GoogleMap 위젯을 추가합니다. API 키를 설정하고, CameraPosition을 통해 초기 지도 위치와 확대 수준을 설정합니다.

GoogleMap(
  initialCameraPosition: CameraPosition(
    target: LatLng(37.5665, 126.9780), // 초기 위치 (서울)
    zoom: 12.0, // 초기 확대 수준
  ),
  onMapCreated: (GoogleMapController controller) {
    // 지도가 생성되면 호출되는 콜백 함수
    // controller를 사용하여 지도 조작 기능을 구현할 수 있음
  },
)

4. 확대/축소 버튼 추가하기

GoogleMap 위젯 위에 확대/축소 버튼을 추가하여 사용자가 확대/축소할 수 있도록 합니다.

GoogleMap(
  ...
  zoomControlsEnabled: false,
)

5. 지도 조작 기능 구현하기

onMapCreated 콜백 함수 내에서 GoogleMapController를 통해 확대/축소 기능을 구현할 수 있습니다.

GoogleMap(
  ...
  onMapCreated: (GoogleMapController controller) {
    controller.animateCamera(CameraUpdate.zoomIn());
    controller.animateCamera(CameraUpdate.zoomOut());
  },
)

위와 같이 CameraUpdate를 사용하여 지도를 확대하거나 축소할 수 있습니다.

이제 지도를 확대/축소하는 기능이 구현되었습니다.

참고 자료

• google_maps_flutter 패키지
• Google Cloud Console
• Google Maps APIs