← 글 목록

notes

Google Map 가이드

7 min read

Google Maps SDK 연동·API 키·지도 표시와 마커 설정 가이드.

Kim mr.

프론트엔드 · 기술 블로그

0. 초기 설정

0-1. React Native 프로젝트 생성

  • Google Map을 구현할 프로젝트가 이미 존재하는 경우, 건너뛰어도 되는 과정입니다.
  • 터미널에 다음 코드를 입력합니다.
# React Native TypeScript 프로젝트 생성
npx react-native init GoogleMapPractice --template react-native-template-typescript

  • 터미널에 다음 코드를 입력합니다.
cd GoogleMapPractice
code .

0-2. Google Cloud 프로젝트 생성

  • API 키를 등록할 프로젝트가 이미 존재하는 경우, 건너뛰어도 되는 과정입니다.

  • 프로젝트 이름을 입력한 후, 만들기 클릭

  • 생성한 프로젝트를 선택합니다.

1. API 키 등록

1-1. API 키 등록 (Android)

  • API 및 서비스 검색 → API 및 서비스 클릭

  • 사용자 인증 정보 클릭 → 사용자 인증 정보 만들기 클릭 → API 키 클릭

  • 생성된 API Key를 복사해두고, 닫기를 클릭합니다.
AIzaSyDMBDIU8odk2nSOtUHgmud-hAczZYmC5GY

  • androdi/app/build.gradle 에서 applicationId 정보를 확인합니다.

  • 터미널에 다음 코드를 입력합니다. (SHA1 확인) 
cd android
./gradlew signingReport

  • API 키 이름 클릭 → 내용 입력 후 저장 클릭

1-2. API 키 등록 (iOS)

  • 사용자 인증 정보 만들기 클릭 → API 키 클릭

  • 생성된 API Key를 복사해두고, 닫기를 클릭합니다.
AIzaSyC2yJT09WxXGQsX4pUr9plrOPiy4mgGrpE

  • API 키 이름 클릭 → 내용 입력 후 저장 클릭

2. Map SDK 사용 등록

  • 라이브러리 클릭

2-1. Map SDK 사용 등록 (Anrdoid)

  • Maps SDK for Android 클릭 → 사용 클릭
  • 사용 설정된 API에 Maps SDK for Android가 추가된 것을 확인할 수있습니다.

2-2. Map SDK 사용 등록 (iOS)

  • API 라이브러리 검색 → 라이브러리 클릭

  • Maps SDK for iOS 클릭 → 사용 클릭
  • 사용 설정된 API에 Maps SDK for iOS가 추가된 것을 확인할 수있습니다.

3. React Native 프로젝트에 의존성 설치 및 설정

  • 터미널에 다음 코드를 입력합니다.
cd ..
yarn add react-native-maps

  • 터미널에 다음 코드를 입력합니다.
cd ios
arch -x86_64 pod install    # 또는 pod install
  • React Native 0.60 이상부터는 autolinking이 지원되기 때문에 설정이 많이 복잡하지 않습니다.
  • React Native 버전이 0.60 미만인 경우에는 추가 설정이 필요합니다.

3-1. Android 환경 설정

  • command + P 에서 AndroidManifest.xml을 검색합니다.
  • 다음 코드를 application 하위에 추가합니다.
<meta-data
	android:name="com.google.android.geo.API_KEY"
	android:value="[API_KEY가 들어가는 부분]"/>

<!-- You will also only need to add this uses-libray tag -->
<uses-library android:name="org.apache.http.legacy" android:required="false"/>
  • forAndroid의 API_KEY 를 입력하면 됩니다
  • 완성된 코드는 다음과 같습니다.

3-2. iOS 환경 설정

  • command + P 에서 AppDelegate.mm을 검색합니다.
  • 상단 헤더 파일을 불러오는 부분에 다음 코드를 추가합니다.
#import <GoogleMaps/GoogleMaps.h>

  • didFinishLaunchingWithOptions 함수의 최상단에 다음 코드를 추가합니다.
- (BOOL)application:(UIApplication *)application
didFinishLaunchingWithOptions:(NSDictionary *)launchOptions
{ 
	[GMSServices provideAPIKey:@"[API_KEY가 들어가는 부분]"];
  // ...
}
  • foriOS의 API_KEY 를 입력하면 됩니다
  • 완성된 코드는 다음과 같습니다.

  • Xcode를 통해 프로젝트의 iOS 폴더를 엽니다.
  • 프로젝트 이름 클릭 → TARGETS 카테고리 내의 프로젝트 이름 클릭 → Info 클릭 → + 클릭

    → Privary - Location Always and When In Use Usage Description 추가

  • command + P 에서 Podfile을 검색합니다.

  • 다음 코드를 추가합니다.
# 상단 부분에 추가
rn_maps_path = '../node_modules/react-native-maps'

# target {Project Name} do 아래 추가
pod 'react-native-google-maps', :path => rn_maps_path
pod 'GoogleMaps'
pod 'Google-Maps-iOS-Utils'
  • 완성된 코드는 다음과 같습니다.

3-3. Map View 컴포넌트 추가

  • App.tsx의 코드를 모두 지우고, 다음 코드를 입력합니다.
import React from 'react';
import {View} from 'react-native';
import MapView, {PROVIDER_GOOGLE} from 'react-native-maps';

function App() {
  return (
    <>
      <View style={{flex: 1}}>
        <MapView
          style={{flex: 1}}
          provider={PROVIDER_GOOGLE}
          initialRegion={{
            latitude: 37.78825,
            longitude: -122.4324,
            latitudeDelta: 0.0922,
            longitudeDelta: 0.0421,
          }}
        />
      </View>
    </>
  );
}

export default App;

  • 완성된 코드는 다음과 같습니다.

3-4. 정상 작동 확인

  • 터미널에 다음 명령어를 입력합니다. (Android 확인)
yarn android

  • 터미널에 다음 명령어를 입력합니다. (iOS 확인)
yarn ios

3-5. iOS 빌드 오류 해결 방법

  • 다음과 같은 오류가 발생하는 경우에 대한 해결 방법입니다.
  • command + P 에서 Podfile을 검색합니다.

  • 기존의 코드를 다음 코드로 변경합니다. (버전 변경)
platform :ios, 13.0
  • 기존 코드를 다음의 코드로 변경합니다. (사진 참고)
post_install do |installer|
    react_native_post_install(
      installer,
      # Set `mac_catalyst_enabled` to `true` in order to apply patches
      # necessary for Mac Catalyst builds
      :mac_catalyst_enabled => false
    )
      installer.pods_project.build_configurations.each do |config|
      config.build_settings["EXCLUDED_ARCHS[sdk=iphonesimulator*]"] = "arm64"

      __apply_Xcode_12_5_M1_post_install_workaround(installer)
    end
  end
  • 터미널에 다음 코드를 입력합니다.
cd ios
pod deintegrate
arch -x86_64 pod install
cd ..
yarn ios