[Flutter] 플러터 google_maps_flutter

플러터에서 google map api를 사용하는 방법을 알아보겠습니다.

 

일단 사용할 패키지를 설치해줍니다.

 

  google_maps_flutter: ^2.2.1

 

https://console.cloud.google.com

Google 클라우드 플랫폼

설치후에 위 링크로 이동하여 구글 클라우드 플랫폼에 접속해서 API키를 발급받아야합니다.

 

구글 클라우드플랫폼 새 프로젝트 만들기

기존 프로젝트가 있다면 사용하셔도 괜찮지만 새 프로젝트를 기준으로 포스팅을 해보겠습니다.

 

만들기를 완료하였다면 만든 프로젝트로 이동한 후에 좌측 상단에 있는 햄버거 메뉴를 눌러서 API및 서비스의 라이브러리를 클릭합니다.

좌측 햄버거 메뉴 클릭시 나오는 메뉴

 

해당 화면에 접속하였다면 빨간색 박스 두 부분에 들어가서 사용버튼을 눌러줍니다.

구글 클라우드 플랫폼 API서비스 라이브러리

안드로이드, iOS Map SDK 사용화면

다시 프로젝트 화면으로 돌아와 좌측 사용자 인증 정보 탭으로 들어와 준뒤에 상단에 사용자 인증 정보 만들기를 눌러서 API키 2개를 생성해줍니다.
2개를 생성하는 이유는 iOS와 android 각각의 키가 필요하기 때문입니다.

프로젝트 사용자 인증 정보 탭

사용자 인증 정보 만들기 API키 만들기

 

생성된 API키를 각각 iOS와 android용으로 세팅을 해주겠습니다.

 

iOS 설정

iOS api key 설정

제한사항에 iOS앱을 클릭해주고 항목 추가 버튼을 클릭해서 번들 ID를 입력해주어야합니다.

번들ID는 자신의 프로젝트 ios/Runner.xcodeproj/project.pbxproj 파일에 있는 PRODUCT_BUNDLE_IDENTIFIER의 값을 입력해주시면 됩니다.

 

API 제한사항에 키 제한은 일단 실습에는 필요가 없으니 제한 안함으로 해두었습니다.

 

그런 뒤에 자신의 프로젝트 ios/Runner/AppDelegate.swift 파일을 열어 코드를 수정해줍니다.

API KEY 부분에 발급받은 key를 입력해주면 됩니다.

import UIKit
import Flutter
import GoogleMaps

@UIApplicationMain
@objc class AppDelegate: FlutterAppDelegate {
  override func application(
    _ application: UIApplication,
    didFinishLaunchingWithOptions launchOptions: [UIApplication.LaunchOptionsKey: Any]?
  ) -> Bool {
    GMSServices.provideAPIKey("API KEY")
    GeneratedPluginRegistrant.register(with: self)
    return super.application(application, didFinishLaunchingWithOptions: launchOptions)
  }
}

 

android 설정

android api key 설정

애플리케이션 제한사항 부분에 Android 앱을 선택합니다.

 

항목 추가 하는 부분이 약간 다릅니다.

android 항목 추가

패키지 이름은 자신의 프로젝트 android/app/src/main/AndroidManifest.xml 파일에 manifest 태그에 package 부분을 넣어 주시면됩니다.

 

그리고 SHA-1 키를 넣어주어야 하는데 

 

Linux 또는 macOS:

keytool -list -v -keystore ~/.android/debug.keystore -alias androiddebugkey -storepass android -keypass android

Windows:

keytool -list -v -keystore "%USERPROFILE%\.android\debug.keystore" -alias androiddebugkey -storepass android -keypass android

둘 중에 자신의 운영체제에 맞는 명령어를 입력하면 

 

...

SHA: xx:xx:xx:...

...

이렇게 생긴 부분이 나오는데 그 부분을 복사해서 넣어주면 됩니다.

 

설정을 한뒤 자신의 프로젝트 android/app/src/main/AndroidManifest.xml 파일에 </application>위에 이 부분을 넣어줍니다.

<meta-data android:name="com.google.android.geo.API_KEY"
            android:value="API Key"/>

 

이제 설정은 끝났으니 pub.dev에 있는 예제 코드를 붙여넣어준 뒤에 에뮬레이터를 실행 시켜주면 잘 나오게 됩니다 !

import 'dart:async';

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(
      title: 'Flutter Google Maps Demo',
      home: MapSample(),
    );
  }
}

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

class MapSampleState extends State<MapSample> {
  final Completer<GoogleMapController> _controller = Completer();

  static final CameraPosition _kGooglePlex = const CameraPosition(
    target: LatLng(37.42796133580664, -122.085749655962),
    zoom: 14.4746,
  );

  static final CameraPosition _kLake = const CameraPosition(
      bearing: 192.8334901395799,
      target: LatLng(37.43296265331129, -122.08832357078792),
      tilt: 59.440717697143555,
      zoom: 19.151926040649414);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: GoogleMap(
        mapType: MapType.normal,
        initialCameraPosition: _kGooglePlex,
        onMapCreated: (GoogleMapController controller) {
          _controller.complete(controller);
        },
      ),
      floatingActionButton: FloatingActionButton.extended(
        onPressed: _goToTheLake,
        label: const Text('To the lake!'),
        icon: const Icon(Icons.directions_boat),
      ),
    );
  }

  Future<void> _goToTheLake() async {
    final GoogleMapController controller = await _controller.future;
    controller.animateCamera(CameraUpdate.newCameraPosition(_kLake));
  }
}