[React-Native CLI] react-native-maps이용하여 googleMap 구현하기

React-Native 에서 화면 스크린에 구글 맵을 띄우고 싶으면 react-native-maps 을 이용하면된다.

우선 Google Map을 하려면 Google API 키가 필요하다.

react-native-maps 라이브러리 설치

react-native-maps 라이브러리를 설치해준다.

$ npm install react-native-maps
# --- or ---
$ yarn add react-native-maps

pods 설치

cocoapod으로 ios에 react-native에서 라이브러리를 넣어주는 작업을 해준다.

$ npx pod-install

code 추가해주기

ios → ProjectName → AppDelegate.mm파일에 에 코드를 추가한다.

// 이부분 추가
+ #import <GoogleMaps/GoogleMaps.h>

@implementation AppDelegate
...

(BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions
{
// 이부분 추가
+  [GMSServices provideAPIKey:@"_YOUR_API_KEY_"]; // add this line using the api key obtained from Google Console
...

import 부분에 위에 추가

+ #import <GoogleMaps/GoogleMaps.h>

API키 값 추가하는 코드

+  [GMSServices provideAPIKey:@"_YOUR_API_KEY_"]; // add this line using the api key obtained from Google Console

API키 코드를 환경변수로 추가하는 방법은 다른글 참고

Podfile 수정

ios → Podfile 에 있는 부분중 코드 수정

platform :ios, min_ios_version_supported

해당 부분을 다음과 같이 변경해준다.

platform :ios, '14'

---

다음 코드 부분이 있는데

target 'projectName' do

  config = use_native_modules!

아래 코드를 추가해준다.

rn_maps_path = '../node_modules/react-native-maps'
pod 'react-native-google-maps', :path => rn_maps_path

최종적으로 이렇게 되면된다.

target 'matzipapp' do
  rn_maps_path = '../node_modules/react-native-maps'
  pod 'react-native-google-maps', :path => rn_maps_path
  config = use_native_modules!

Info.plist에 내용추가

필수적으로는 NSLocationWhenInUseUsageDescription 부분을 작성해줘야되고 나중에 추후를 위해 다른 부분도 작성해주면좋다.

<key>NSLocationAlwaysAndWhenInUseUsageDescription</key>
<string>이 앱은 사용자 근처의 지리적 위치를 기반으로 지도를 표시하고, 방향을 제공하며, 주변 지역 정보를 확인할 수 있도록 설계되었습니다. 위치 정보는 앱의 핵심 기능을 위해 사용되며, 사용자의 안전과 편의를 보장하기 위해 요청됩니다.</string>
<key>NSLocationAlwaysUsageDescription</key>
<string>이 앱은 사용자 근처의 지리적 위치를 기반으로 지도를 표시하고, 방향을 제공하며, 주변 지역 정보를 확인할 수 있도록 설계되었습니다. 위치 정보는 앱의 핵심 기능을 위해 사용되며, 사용자의 안전과 편의를 보장하기 위해 요청됩니다.</string>
<key>NSLocationWhenInUseUsageDescription</key>
<string>이 앱은 사용자 근처의 지리적 위치를 기반으로 지도를 표시하고, 방향을 제공하며, 주변 지역 정보를 확인할 수 있도록 설계되었습니다. 위치 정보는 앱의 핵심 기능을 위해 사용되며, 사용자의 안전과 편의를 보장하기 위해 요청됩니다.</string>
<key>NSMotionUsageDescription</key>
<string>이 앱은 사용자 근처의 지리적 위치를 기반으로 지도를 표시하고, 방향을 제공하며, 주변 지역 정보를 확인할 수 있도록 설계되었습니다. 위치 정보는 앱의 핵심 기능을 위해 사용되며, 사용자의 안전과 편의를 보장하기 위해 요청됩니다.</string>

해당 부분은 위치정보를 가져올때 필요한 문구로, 사용자에게 동의를 구할때 보여주는 문구이다. 주의할점은 이 부분을 최대한 자세하고 상세하게 작성해야된다. 이후 혹시라도 앱을 배포할때 해당 문구에 대한 심사가 있기 때문에 단순한 "위치 정보가 필요합니다.” 이런 단순 문구는 피하도록하자

Screen 구현

import MapView, { PROVIDER_GOOGLE } from 'react-native-maps'; // remove PROVIDER_GOOGLE import if not using Google Maps
...

export default () => (
   <View style={styles.container}>
     <MapView
       provider={PROVIDER_GOOGLE} 
       style={styles.map}
       region={{
         latitude: 37.78825,
         longitude: -122.4324,
         latitudeDelta: 0.015,
         longitudeDelta: 0.0121,
       }}
     >
     </MapView>
   </View>
);

다음과 같은 형태로 screen을 구현하면 된다.