Flutter/Flutter

Flutter - Google_map (iOS)

hyeonseong 2025. 2. 22. 18:28

초기 셋팅

Google Map을 사용하려면 API Key를 발급 하고, 추가 필요

Google Map API Key 발급 링크

https://cloud.google.com/maps-platform/

 

Google Maps Platform - Location and Mapping Solutions

Create real world and real time experiences for your customers with dynamic maps, routes & places APIs from Google Maps Platform’s location solutions.

mapsplatform.google.com

 

Get Started 클릭

 

Country 서울로 해주고 나머지 동의 후 넘어가준다.

 

우편 번호를 찾으라고 하는데 아래 링크에서 빠르게 찾을 수 있다.

https://www.epost.go.kr/roadAreaCdEng.retrieveRdEngAreaCdList.comm

주소를 입력하고나서 쭉 진행하면 API Key를 주는데 별도의 공간에 저장해두자

 

API 키 사용 제한 팝업인데, 지금은 굳이 테스트에만 사용할 것이기 때문에 나중에 버튼 클릭


GooglaMap 라이브러리 추가 

- 웹 버전의 플러그인은 따로 추가 해주어야함.

dependencies:
  google_maps_flutter: ^2.10.0 // Mobile
  google_maps_flutter_web // Web

iOS 셋팅

ios 버전 14로 하지 않으면 minum version 에러가 

platform :ios, '14.0' # googleMap 현재 버전의 최소 지원 사양이 14

# CocoaPods analytics sends network stats synchronously affecting flutter build latency.
ENV['COCOAPODS_DISABLE_STATS'] = 'true'

경로 : ios/Runner의 AppDelegate.swift에서 직접 추가 해야함.

info.plist에 위치 권한도 추가 


코드 

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

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

  @override
  State<HomeView> createState() => _HomeViewState();
}

class _HomeViewState extends State<HomeView> {
  late GoogleMapController mapController;

  final LatLng _center = const LatLng(37.5665, 126.9780);  /// 서울 위 경도

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: _appBar(),
      body: GoogleMap(
        onMapCreated: _onMapCreated,
        initialCameraPosition: CameraPosition(
          target: _center,
          zoom: 11.0,
        ),
      ),
    );
  }

  AppBar _appBar() {
    return AppBar(
      title: const Text('구글 맵'),
      centerTitle: true,
    );
  }
}