[flutter] 플러터에서 특정 위치에 마커(marker) 표시하기

21 Dec 2023

flutter

플러터에서 지도에 특정 위치에 마커를 표시하는 것은 매우 중요합니다. 사용자에게 위치 정보를 시각적으로 전달하기 위해 이를 활용할 수 있습니다. 이번 포스팅에서는 플러터에서 지도 위에 마커를 표시하는 방법에 대해 알아보겠습니다.

1. 구글 맵스 플러터 패키지 추가하기

먼저, 플러터 앱에 구글 맵스 플러터 패키지를 추가해야 합니다. pubspec.yaml 파일에 아래와 같이 패키지를 추가해주세요.

dependencies:
  flutter:
    sdk: flutter
  google_maps_flutter: ^1.2.0

이후 터미널에 flutter pub get 명령어를 실행하여 패키지를 설치합니다.

2. 마커 표시하기

이제 다음과 같이 코드를 작성하여 지도에 마커를 표시할 수 있습니다:

import 'package:flutter/material.dart';
import 'package:google_maps_flutter/google_maps_flutter.dart';

class MapMarker extends StatefulWidget {
  @override
  _MapMarkerState createState() => _MapMarkerState();
}

class _MapMarkerState extends State<MapMarker> {
  GoogleMapController mapController;

  final LatLng _center = const LatLng(37.77483, -122.41942);

  void _onMapCreated(GoogleMapController controller) {
    mapController = controller;
  }

  Set<Marker> _createMarker() {
    return <Marker>[
      Marker(
        markerId: MarkerId("marker_1"),
        position: LatLng(37.77483, -122.41942),
        infoWindow: InfoWindow(
          title: "San Francisco",
          snippet: "An Interesting city",
        ),
        icon: BitmapDescriptor.defaultMarker,
      ),
    ].toSet();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Map with Marker'),
      ),
      body: GoogleMap(
        onMapCreated: _onMapCreated,
        initialCameraPosition: CameraPosition(
          target: _center,
          zoom: 12.0,
        ),
        markers: _createMarker(),
      ),
    );
  }
}

마커를 표시하기 위해 GoogleMap 위젯을 사용하고, _createMarker 함수에서 마커를 생성하고 위치와 정보를 설정하는 것을 볼 수 있습니다.

위 코드를 사용하여 마커를 표시할 수 있습니다. 이제 위치 기반의 애플리케이션을 개발하거나, 사용자에게 특정 장소를 시각적으로 전달하는 기능을 추가할 수 있을 것입니다.

더 자세한 내용은 공식 문서를 참고하세요.