마커가 표시된 지도 추가

소개

마커가 표시된 지도 예

이 튜토리얼에서는 Flutter 앱에 Google 지도를 추가하는 방법을 설명합니다. 지도에는 특정 위치를 나타내는 마커(핀이라고도 함)가 포함됩니다.

코드 가져오기

Flutter 샘플 저장소를 클론하거나 다운로드합니다. 샘플 코드는 google_maps 디렉터리에 있습니다.

개발 프로젝트 설정

다음 단계로 넘어가기 전에 Flutter 프로젝트 설정 가이드에 설명된 단계를 모두 완료해야 합니다.

1. Flutter용 Google 지도 패키지 가져오기

  1. 원하는 IDE에서 main.dart 파일을 엽니다.
  2. 다음 가져오기 문이 파일에 추가되었는지 확인합니다.
import 'package:google_maps_flutter/google_maps_flutter.dart';

2. Flutter 앱에 Google 지도 추가

Scaffold 위젯 내에 GoogleMap 위젯을 본문으로 추가합니다. 

GoogleMap(
   initialCameraPosition: CameraPosition(
      target: _center,
      zoom: 11.0,
   ),
   markers: {
      const Marker(
         markerId: MarkerId('Sydney'),
         position: LatLng(-33.86, 151.20),
      )
   },
)

  • markerId 옵션은 마커 라벨을 지정합니다.
  • position 옵션은 지도에서 마커가 표시되는 위치를 설정합니다.

3. 앱 빌드 및 실행

다음 옵션 중 하나를 사용하여 Flutter 앱을 시작합니다.

  1. IDE에서 Run 버튼을 클릭합니다.
  2. 명령줄에서 flutter run을 실행합니다.

오스트레일리아 동쪽 해안의 시드니를 가리키는 마커가 포함된 지도가 표시됩니다. 이 페이지의 이미지와 비슷합니다.

문제 해결

  • 지도가 표시되지 않으면 API 키를 가져와 앱에 추가했는지 확인하세요.
  • iOS 번들 식별자를 사용하여 API 키를 제한한 경우 키를 수정하여 앱에 대한 번들 식별자를 추가하세요(com.google.examples.map-with-marker).
  • WiFi 또는 GPS 연결 상태가 양호해야 합니다.
  • 로그를 확인하고 앱을 디버그하려면 Flutter DevTools를 사용합니다.
  • Flutter 앱 실행에 대해 자세히 알아보세요.

4. 코드 이해

이 코드는 GitHub에서 찾을 수 있습니다.

  1. 필요한 패키지를 가져오고 앱을 초기화합니다. 
       import 'package:flutter/material.dart';
   import 'package:google_maps_flutter/google_maps_flutter.dart';

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

   class MyApp extends StatefulWidget {
   const MyApp({super.key});

   @override
      State<MyApp> createState() => _MyAppState();
   }
  2. 오스트레일리아 시드니를 중심으로 하는 지도를 만듭니다.
    class _MyAppState extends State<MyApp> {
   
   late GoogleMapController mapController;
   
   final LatLng _center = const LatLng(-33.86, 151.20);
   
   void _onMapCreated(GoogleMapController controller) {
      mapController = controller;
   }
  3. 앱에 지도를 표시하는 데 필요한 위젯을 추가합니다. 
    @override
Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: const Text('Maps Sample App'),
          backgroundColor: Colors.green[700],
        ),
        body: GoogleMap(
            onMapCreated: _onMapCreated,
            initialCameraPosition: CameraPosition(
              target: _center,
              zoom: 11.0,
            ), // CameraPosition
        ), // GoogleMap
      ), // Scaffold
    ); // MaterialApp
  }
}
  4. 마커 위젯을 추가하여 앱에 추가합니다. 
       body: GoogleMap(
      onMapCreated: _onMapCreated,
      initialCameraPosition: CameraPosition(
         target: _center,
         zoom: 11.0,
      ),
      markers: {
         const Marker(
               markerId: const MarkerId("Sydney"),
               position: LatLng(-33.86, 151.20),
            ), // Marker
      }, // markers
   ), // GoogleMap
   ...
  5. 마커에 정보 창을 추가합니다. 
          const Marker(
            markerId: const MarkerId("Sydney"),
            position: LatLng(-33.86, 151.20),
            infoWindow: InfoWindow(
               title: "Sydney",
               snippet: "Capital of New South Wales",
            ), // InfoWindow
      ), //Marker
      ...
    기본적으로 Flutter용 Google 지도 패키지는 사용자가 마커를 탭할 때 정보 창의 콘텐츠를 표시합니다. 기본 동작으로 충분하면 마커에 클릭 리스너를 추가하지 않아도 됩니다.

축하합니다. 특정 위치를 나타내고 정보 창에 추가 정보를 제공하는 마커가 포함된 Google 지도를 표시하는 Flutter 앱을 빌드했습니다. Flutter용 Google 지도 패키지를 사용하는 방법도 알아보았습니다.