이번 포스트에서는 플러터(Flutter) 앱에서 지도 위에 동적으로 마커를 추가하는 방법에 대해 알아보겠습니다.

필요한 패키지

먼저, google_maps_flutter 패키지를 사용하여 지도를 구현했다고 가정합니다. pubspec.yaml 파일에 아래와 같이 google_maps_flutter 패키지를 추가합니다.

dependencies:
  flutter:
    sdk: flutter
  google_maps_flutter: ^1.2.0

이후, pub get 명령어를 실행하여 패키지를 다운로드 받습니다.

지도에 마커 추가

마커를 추가하기 위해서는 GoogleMap 위젯과 Marker를 사용해야 합니다. 아래는 지도 위에 마커를 추가하는 코드입니다.

GoogleMap(
  initialCameraPosition: _initialCameraPosition,
  markers: _markers,
  onMapCreated: (GoogleMapController controller) {
    _mapController = controller;
  },
)

Set<Marker> _markers = {};

void _addMarker(LatLng position, String markerId, String title, String snippet) {
  setState(() {
    _markers.add(Marker(
      markerId: MarkerId(markerId),
      position: position,
      infoWindow: InfoWindow(
        title: title,
        snippet: snippet,
      ),
      icon: BitmapDescriptor.defaultMarker,
    ));
  });
}

위 코드에서 _initialCameraPosition은 초기 지도의 위치를 나타내는 CameraPosition 객체이고, _mapController는 GoogleMap 컨트롤러입니다.

그리고 _addMarker 함수를 통해 마커를 추가할 수 있습니다. 이 함수는 마커의 위치와 아이디, 제목, 설명을 전달받아 지도에 마커를 추가합니다.

마무리

이제 여러분은 플러터에서 지도 위에 동적으로 마커를 추가하는 방법을 알게 되었습니다. 이를 응용하여 사용자의 위치 정보나 서비스 위치를 나타내는데 활용할 수 있을 것입니다.

참고: Google Maps Flutter 패키지