[Flutter] 지도 사용 Google Map API, geolocator 플러그인 패키지 개발환경 설정 / 플러터 구글 맵

Contents

---

 

구글 지도를 사용한 앱을 개발하기 위한 환경 세팅을 살펴보도록 하자.

 

 

 

---

 

플러그인 찾고 등록하기

아래의 공식사이트에서 사용할 패키지를 검색하고, 패키지 이름과 버전을 가져온다.

https://pub.dev/

Dart packages

 

 

 

Google Maps for Flutter Plugin 

google_maps_flutter 패키지

해당 플러그인은 flutter.dev 플러터 공식팀이 관리한다.

https://pub.dev/packages/google_maps_flutter

google_maps_flutter | Flutter Package

 

 

Flutter Geolocator Plugin 

geolocator 패키지

 

https://pub.dev/packages/geolocator

geolocator | Flutter Package

 

 

---

 

먼저 Google map 플러그인부터 설정을 해보자

Google Maps for Flutter Plugin 설정하기

 

 

 

---

 

Google Maps Platform 접속 후 API 설정하기

https://mapsplatform.google.com/

Google Maps Platform - Location and Mapping Solutions

 

 

---

 

Get Started 버튼 클릭

 

---

결제 정보 입력

실제 결제가 되진 않지만 카드 등록과 약관 동의가 필요하다.

 

---

 

GOOGLE MAPS PLATFORM으로 이동 클릭

---

 

GOOGLE MAPS PLATFORM 홈 화면

 

 

사용 설정된  API 확인하기

아래의 2개의 API키가 파란색으로 활성화가 되어 있는지 확인을 한다. 만약 안 보인다면 아래의 추가 API 부분에서 위로 올려줘야 한다.

 

 

사용자 인증 정보란에서 API 키 생성 후 확인하기

• 상단에 '사용자 인증 정보 만들기'를 눌러 API 키 생성하기를 누르면 자동으로 생성이 된다.
• 아래의 생성된 API 오른쪽에 '키 표시'를 누르면 Maps API Key를 확인할 수 있다.

 

 

---

 

 

그럼 다시 google_maps_flutter 홈페이지로 가서 추가적인 환경 세팅을 해준다.

 

Android 개발환경 Map API 세팅하기

 

1. android > app > build.gradle 에서 minSdkVersion에 적혀있는 부분을 지우고 20을 설정해준다.

android {
    defaultConfig {
        minSdkVersion 20
    }
}

 

2. android > app > src >main >AndroidManifest.xml 에서 manifest 안에 붙여넣기

<manifest ...
  <application ...
    <meta-data android:name="com.google.android.geo.API_KEY"
               android:value="YOUR KEY HERE"/>

 

3. 'YOUR KEY HERE' 부분에 Google map key 복사 붙여넣기 해주기

 

---

 

iOS개발환경 Map API 세팅하기

 

1. ios > Runner > AppDelegate.swift 전체를 지우고 복붙해주기

import UIKit
import Flutter
import GoogleMaps

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

 

2. 'YOUR KEY HERE' 부분에 Google map key 복사 붙여넣기 해주기

 

---

 

pubspec.yaml 파일에 패키지 추가

 

---

 

Flutter Geolocator Plugin 설정하기

다시 공식 문서를 들여다 보면 https://pub.dev/packages/geolocator 아래로 쭉 내려서 android 토글바를 열어 해당 값들을 설정해준다.

 

Android Permissions 설정해주기

 

사용자의 더욱 디테일한 현재 위치 정보 접근 권한

<uses-permission android:name="android.permission.ACCESS_FINE_LOCATION" />

 

사용자의 덜 디테일한 현재 위치 정보 접근 권한

<uses-permission android:name="android.permission.ACCESS_COARSE_LOCATION" />

위치 권한을 어차피 허용받야아 하니, 보통은 위에 더욱 디테일한 위치 정보 접근 권한을 사용한다.

 

 

App이 Background로 갔을 때도 위치 정보를 받아오기 위한 권한

<uses-permission android:name="android.permission.ACCESS_BACKGROUND_LOCATION" />

 

android > app > src > main > AndroidManifest.xml 상단에 permission 추가하기

 

 

---

 

iOS Permissions 설정해주기

 

앱 사용 중 위치정보를 가져오기 위한 권한

<string></string> 사이에 권한을 요청할 때 사용자에게 보여질 메시지를 작성한다.

<key>NSLocationWhenInUseUsageDescription</key>
<string>This app needs access to location when open.</string>

 

언제든지, 항상 위치정보를 가져오기 위한 권한

<string></string> 사이에 권한을 요청할 때 사용자에게 보여질 메시지를 작성한다.

<key>NSLocationAlwaysUsageDescription</key>
<string>This app needs access to location when in the background.</string>

 

ios > Runner > Info.plist 하단에 permission 추가하기

 

---

 

구글 맵 사용해보기

LatLng,  CameraPosition 클래스 사용하기

구글맵에서 제공하는 클래스로 위도와 경도로 특정 위치를 표현할 수 있는 클래스이다.

LatLng은 latitude : 위도 / longitude : 경도의 줄임말을 뜻한다.

 

첫 번째 매개변수로는 위도, 두 번째 매개변수로는 경도를 입력해준다.

  

 

 

구글 맵에서 위도 경도 값 가져오기

https://www.google.co.kr/maps/?hl=ko

Google 지도

 

구글 맵에 들어간 후 위도와 경도 값을 가져오고자 하는 장소에서

1. 마우스 우클릭을 한 후에 '이곳이 궁금한가요?'를 클릭한다.

 

 

2. 위치 표시 버튼을 한번 더 클릭한다.

 

3. 위도 경도 값을 가져온다.

 

• LatLang : 위도 경도 설정
• CameraPosition : 지도를 바라보고 있는 위치 설정
  • target : 지도의 중심이 될 위치를 지정
  • zoom : 확대 정도
• GoogleMap 위젯 
  • initialCameraPosition : GoogleMap 위젯에서 필수로 입력해야 하는 매개변수로 CameraPosition 클래스를 입력해준다.

 

구글 맵 사용 코드 작성하기

home_screen.dart 파일 코드

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

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

  @override
  State<HomeScreen> createState() => _HomeScreenState();
}

class _HomeScreenState extends State<HomeScreen> {
  static final LatLng schoolLatlng = LatLng(
    //위도와 경도 값 지정
    37.540853,
    127.078971,
  );

  static final CameraPosition initialPosition = CameraPosition(
    //지도를 바라보는 카메라 위치
    target: schoolLatlng, //카메라 위치(위도, 경도)
    zoom: 15, //확대 정도
  );

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(
          '구글지도로 보는 학교',
          style:
              TextStyle(color: Colors.green[900], fontWeight: FontWeight.bold),
        ),
        centerTitle: true,
        backgroundColor: Colors.white,
      ),
      body: GoogleMap(
        //구글 맵 사용
        mapType: MapType.satellite, //지도 유형 설정
        initialCameraPosition: initialPosition, //지도 초기 위치 설정
      ),
    );
  }
}

 

 

구글맵 테마 설정하기 (mapType : )

MapType.hybrid / MapType.satellite /

MapType.terrain / MapType.normal