[Flutter] 구글 맵 API 활용 - Web

구글 맵 API

Google 클라우드 플랫폼

위 링크로 들어가서 본인 구글 계정을 API를 사용할 수 있도록 활성화 하고 프로젝트를 만든다.

 

key 생성 및 제한 추가

좌측 탭에서 '사용자 인증 정보' 클릭 후 상단에 '사용자 인증 정보 만들기'를 클릭 해 API 키를 생성한다.

사진에는 API키가 생성되어 있지만 처음 접속한다면 없는 것이 정상.

 

생성된 API 클릭

 

위 사진처럼 세팅한다. 하지만 웹사이트 추가의 웹사이트의 주소는 자신의 환경에 맞게 설정하자.

(나는 포트포워딩으로 외부에서 접속할 수 있도록 만들어 놨다. 그래서 공인IP와 열어 놓은 포트로 웹사이트를 설정했다.)

 

API 키를 복사한다. (나중에 flutter 세팅에서 쓰임)

 

Flutter 세팅

pub 설치

google_maps_flutter_web | Flutter Package

 

커맨드나 yaml를 통해 위 pub를 설치한다.

그리고 web/index.html 에 script를 입력하고 그 안에 api key를 붙혀 넣는다.

<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY"></script>

 

테스트

아래와 같은 lib/main.dart를 만들어 테스트 해본다.

 

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({Key? key}) : super(key: key);

  @override
  _MyAppState createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
    static const CameraPosition _kGooglePlex = CameraPosition(
    target: LatLng(37.42796133580664, -122.085749655962),
    zoom: 14.4746,
  );

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: GoogleMap(
        mapType: MapType.hybrid,
        initialCameraPosition: _kGooglePlex,
        onMapCreated: (controller) {},
      ),
    );
  }
}