Flutter) google_maps_flutter 사용해보기

 

pub.dev 에서 제공하는 google_maps_flutter 를 사용해서 간단하게 지도를 띄워보자.

 

 

프로젝트 생성

프로젝트 생성

flutter 프로젝트를 생성후 main에 있는 코드들을 전부 지우고 시작!

 

 

google map api key 받기

구글맵을 사용하려면 api key를 받아야 한다.

 

https://mapsplatform.google.com/

Google Maps Platform - Location and Mapping Solutions

해당 사이트에서 get started 버튼 누르고 가입한다음 api key 받으면 된다.. 쉽다..

 

 

프로젝트에 라이브러리 등록

 

https://pub.dev/packages/google_maps_flutter/install

google_maps_flutter | Flutter Package

 

사이트에 들어가 최신 버전의 라이브러리를 pubspec.yaml 에 등록한다.

글 작성 기준 최신 버전 : google_maps_flutter: ^2.1.10

 

라이브러리 등록

 

 

환경설정

google map을 사용하려면 몇가지 설정을 해야한다.

 

 

1번

 

android > app > build.gradle > minSdkVersion 을 20으로 수정 !

 

 

2번

 

android > app > src > main > AndroidManifest.xml > 아래 코드 복붙 후

 

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

 

->  "YOUR KEY HERE" 에 발급받은 google map api key 를 복사 붙여 넣으면 된다.

 

 

3번

 

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)
  }
}

 

그리고 "YORE KEY HERE" 에  발급 받은 Google map api key 를 넣는다.

 

 

이로써 설정은 끝났다.

 

 

코딩 시작

 

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

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

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      title: "GoogleMap",
      home: GoogleMapPage(),
    );
  }
}


class GoogleMapPage extends StatelessWidget {
  const GoogleMapPage({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("Google Map"),
      ),
      body: GoogleMap(
        initialCameraPosition: CameraPosition(target: LatLng(37.43296265331129, -122.08832357078792)),
      ),
    );
  }
}

 

main.dart에 코드를 작성하면 된다.

body에 GoogleMap위젯을 사용하면 지도를 보여준다.

이 GoogleMap 위젯은 라이브러리로 받은 google_maps_flutter 에 들어있으니 import를 시켜준다.

 

 

이부분은 이해안가면 건너뛰세요

 

GoogleMap 위젯을 살펴보면 필수 생성자로 initialCameraPosition 을 받는다.

GoogleMap 위젯 필수 생성자

그래서 GoogleMap() 위젯을 사용할 때 initialCameraPosition 를  넣은 것이다.

그리고 initalCameraPosition 을 살펴보면 type이 CameraPostion 이므로 CameraPosition 위젯을 넣어준 것이다.

CameraPosition을 살펴보면 target 을 필수 생성자로 받고 있다.

이 target은 LatLng 타입이다.  

LatLng은 위도 경도를 받는 위젯이다.

LatLng에 위도 경도를 입력하면 그 위치로 지도를 처음에 보여주는것이다.

현재 입력한 위도 경도는 구글이 기본으로 알려주는 위도 경도이다.

 

라이브러리를 뜯어본적 없는 사람이면 엄청 어려울 것이다. 필자도 처음 해봄....

 

건너 뛰기 ---------------------------------------------------------------------------------------

 

코드를 실행 시켜보면 아래와 같은 화면이 나올 것이다.

 

실행화면

 

아무 의미없는 위치로 구글맵이 보여진다.

이제 원하는 위치로 보이게 조절해보자.

하기 위해선 해당 위치에 위도 경도를 찾아야 한다.

 

http://map.esran.com/

위도경도 찾기

 

해당 사이트에서 찾고싶은 위치를 검색후 클릭하면 위도 경도를 확인 할 수 있다.

강남역을 찾아보자!

 

 

위도와 경도를 복사해 코드의 LatLng(위도,경도) 붙여 넣는다.

 

그리고 실행해보면 설정한 강남역 기준으로 구글 맵이 보인다.

 

너무 멀리보여서 줌기능을 사용해보자.

 

 

CameraPosition에 zoom을 설정해주면 해당숫자만큼 확대된다.