[flutter] 플러터에서 지도에 다중 마커 표시하기

21 Dec 2023

flutter

플러터를 사용하여 지도에 다중 마커를 표시하는 기능을 구현하는 방법에 대해 알아보겠습니다.

필요한 패키지 추가하기

우선, 다중 마커를 표시하기 위해 플러터 프로젝트에 google_maps_flutter 패키지를 추가해야 합니다. pubspec.yaml 파일에 다음과 같이 패키지를 추가합니다.

dependencies:
  google_maps_flutter: ^2.0.6

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

다중 마커 표시하기

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

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: MapSample(),
    );
  }
}

class MapSample extends StatefulWidget {
  @override
  State<MapSample> createState() => MapSampleState();
}

class MapSampleState extends State<MapSample> {
  late GoogleMapController mapController;
  final Set<Marker> _markers = {};

  void _onMapCreated(GoogleMapController controller) {
    mapController = controller;
    
    setState(() {
      _markers.add(Marker(
        markerId: MarkerId('id-1'),
        position: LatLng(37.7749, -122.4194),
        infoWindow: InfoWindow(title: 'San Francisco'),
        icon: BitmapDescriptor.defaultMarker,
      ));
      
      _markers.add(Marker(
        markerId: MarkerId('id-2'),
        position: LatLng(34.0522, -118.2437),
        infoWindow: InfoWindow(title: 'Los Angeles'),
        icon: BitmapDescriptor.defaultMarkerWithHue(BitmapDescriptor.hueOrange),
      ));
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Map Sample'),
        backgroundColor: Colors.green[700],
      ),
      body: GoogleMap(
        onMapCreated: _onMapCreated,
        initialCameraPosition: CameraPosition(
          target: LatLng(37.7749, -122.4194),
          zoom: 7,
        ),
        markers: _markers,
      ),
    );
  }
}

위 코드는 플러터 앱에서 google_maps_flutter 패키지를 사용하여 지도에 다중 마커를 추가하는 예제입니다. 예제에서는 MapSample 위젯을 생성하여 GoogleMap 위젯을 사용하여 지도를 표시하고, _onMapCreated 메서드를 사용하여 다중 마커를 추가합니다.

위 예시에서 Marker 클래스의 인스턴스를 사용하여 각 마커의 위치, 정보창 및 아이콘을 설정할 수 있습니다.

위 코드를 실행하면 플러터 앱이 시작되고, 초기 지도 위치에 두 개의 마커가 추가된 지도가 표시됩니다.

이제 플러터를 사용하여 지도에 다중 마커를 표시하는 방법에 대한 이해가 높아졌을 것입니다.

참고 자료

google_maps_flutter 패키지