Flutter의 구글 지도(Google Maps) 통합

Google Maps는 위치 기반 애플리케이션을 개발할 때 필수적인 도구입니다. Flutter 애플리케이션에 Google Maps를 통합하면 사용자가 위치 정보를 시각적으로 확인하고, 지도 상에서 다양한 작업을 수행할 수 있습니다. 이번 글에서는 Flutter에서 Google Maps를 사용하는 방법과 이를 구현하는 예제를 자세히 살펴보겠습니다.

1. Google Maps API 키 발급

Google Maps를 사용하려면 먼저 Google Cloud Platform에서 API 키를 발급받아야 합니다.

1. Google Cloud Console에 접속하여 새 프로젝트를 생성합니다.
2. 생성한 프로젝트에서 API 및 서비스 > 라이브러리로 이동합니다.
3. Maps SDK for Android와 Maps SDK for iOS를 각각 선택하여 활성화합니다.
4. API 및 서비스 > 사용자 인증 정보로 이동하여 API 키를 생성합니다.

2. google_maps_flutter 패키지 설치

Google Maps를 Flutter 프로젝트에 통합하려면 google_maps_flutter 패키지를 설치해야 합니다. pubspec.yaml 파일에 다음 의존성을 추가합니다.

dependencies:
  flutter:
    sdk: flutter
  google_maps_flutter: ^2.1.0

 

그리고 pub get 명령어를 실행하여 패키지를 설치합니다.

3. Android 설정

Android 프로젝트에서 Google Maps를 사용하려면 android/app/src/main/AndroidManifest.xml 파일을 수정해야 합니다.

<manifest xmlns:android="http://schemas.android.com/apk/res/android"
    package="com.example.your_project_name">

    <application>
        <!-- Add the following meta-data tag -->
        <meta-data
            android:name="com.google.android.geo.API_KEY"
            android:value="YOUR_API_KEY"/>
    </application>

</manifest>

 

위 코드에서 YOUR_API_KEY를 발급받은 API 키로 대체합니다.

4. iOS 설정

iOS 프로젝트에서 Google Maps를 사용하려면 ios/Runner/Info.plist 파일을 수정해야 합니다.

<key>io.flutter.embedded_views_preview</key>
<true/>
<key>GMSApiKey</key>
<string>YOUR_API_KEY</string>

위 코드에서 YOUR_API_KEY를 발급받은 API 키로 대체합니다.

 

 

반응형

 

 

5. Google Maps 위젯 사용하기

이제 Flutter 애플리케이션에서 Google Maps 위젯을 사용하여 지도를 표시할 수 있습니다.

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: MapScreen(),
    );
  }
}

class MapScreen extends StatefulWidget {
  @override
  _MapScreenState createState() => _MapScreenState();
}

class _MapScreenState extends State<MapScreen> {
  late GoogleMapController mapController;

  final LatLng _center = const LatLng(37.7749, -122.4194);

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Google Maps Example'),
        backgroundColor: Colors.green[700],
      ),
      body: GoogleMap(
        onMapCreated: _onMapCreated,
        initialCameraPosition: CameraPosition(
          target: _center,
          zoom: 11.0,
        ),
      ),
    );
  }
}

 

위 코드는 기본적인 Google Maps 위젯을 사용하는 예제입니다. 지도의 초기 위치를 LatLng 객체로 설정하고, GoogleMap 위젯을 사용하여 지도를 표시합니다.

6. 마커 추가

지도의 특정 위치에 마커를 추가할 수 있습니다.

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: MapScreen(),
    );
  }
}

class MapScreen extends StatefulWidget {
  @override
  _MapScreenState createState() => _MapScreenState();
}

class _MapScreenState extends State<MapScreen> {
  late GoogleMapController mapController;

  final LatLng _center = const LatLng(37.7749, -122.4194);
  final Set<Marker> _markers = {};

  void _onMapCreated(GoogleMapController controller) {
    mapController = controller;
    setState(() {
      _markers.add(
        Marker(
          markerId: MarkerId('default_marker'),
          position: _center,
          infoWindow: InfoWindow(
            title: 'San Francisco',
            snippet: 'An interesting city',
          ),
        ),
      );
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Google Maps Example'),
        backgroundColor: Colors.green[700],
      ),
      body: GoogleMap(
        onMapCreated: _onMapCreated,
        initialCameraPosition: CameraPosition(
          target: _center,
          zoom: 11.0,
        ),
        markers: _markers,
      ),
    );
  }
}

 

위 코드는 기본 마커를 지도에 추가하는 예제입니다. _markers 집합에 Marker 객체를 추가하여 마커를 설정합니다.

7. 사용자 현재 위치 표시

사용자의 현재 위치를 지도에 표시하려면 location 패키지를 사용하여 위치 정보를 가져올 수 있습니다. pubspec.yaml 파일에 location 패키지를 추가합니다.

dependencies:
  location: ^4.3.0

 

그리고 사용자의 현재 위치를 가져와 지도에 표시하는 방법은 다음과 같습니다.

 

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

void main() {
  runApp(MyApp());
}

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

class MapScreen extends StatefulWidget {
  @override
  _MapScreenState createState() => _MapScreenState();
}

class _MapScreenState extends State<MapScreen> {
  late GoogleMapController mapController;
  final LatLng _initialPosition = const LatLng(37.7749, -122.4194);
  final Set<Marker> _markers = {};
  late LocationData _currentPosition;
  final Location _location = Location();

  void _onMapCreated(GoogleMapController controller) {
    mapController = controller;
    _location.onLocationChanged.listen((LocationData currentLocation) {
      setState(() {
        _currentPosition = currentLocation;
        _markers.add(
          Marker(
            markerId: MarkerId('current_location'),
            position: LatLng(_currentPosition.latitude!, _currentPosition.longitude!),
            infoWindow: InfoWindow(
              title: 'Your Location',
            ),
          ),
        );
      });
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Google Maps Example'),
        backgroundColor: Colors.green[700],
      ),
      body: GoogleMap(
        onMapCreated: _onMapCreated,
        initialCameraPosition: CameraPosition(
          target: _initialPosition,
          zoom: 11.0,
        ),
        markers: _markers,
        myLocationEnabled: true,
        myLocationButtonEnabled: true,
      ),
    );
  }
}

 

위 코드는 사용자의 현재 위치를 가져와 지도에 표시하는 예제입니다. location 패키지를 사용하여 위치 정보를 가져오고, GoogleMap 위젯의 markers 속성에 현재 위치 마커를 추가합니다. 또한 myLocationEnabled와 myLocationButtonEnabled를 true로 설정하여 현재 위치 버튼을 활성화합니다.

결론

Google Maps는 Flutter 애플리케이션에서 위치 기반 서비스를 구현하는 데 필수적인 도구입니다. 지도를 표시하고, 마커를 추가하고, 사용자의 현재 위치를 표시하는 방법을 통해 Google Maps의 기본적인 사용법을 이해할 수 있습니다. 이번 글에서 소개한 방법들을 활용하여 Flutter 애플리케이션에서 Google Maps를 효율적으로 사용해보세요. Google Maps를 통해 애플리케이션의 기능을 확장하고, 사용자 경험을 향상시킬 수 있습니다.