[ReactNative] Mapview(Google Map) 사용하기 (with Expo)

<안드로이드 앱을 기본으로 설명합니다. IOS에서 동작은 확인했지만 장담하지는 못합니다.>

 

※ 본 포스트는 Expo를 이용하여 개발하는 환경에 대해서 다룹니다. 다른 도구를 이용하지 않고 지도를 이용한다면 react-native-maps(https://github.com/react-native-community/react-native-maps) 를 이용하면 됩니다.

 

React Native로 앱을 만들다 보면 지도를 이용해야 하는 경우가 발생한다.

Expo를 이용하여 개발환경을 구성했을 때 Mapview를 사용하여 지도를 구성하는 경우에 대해 정리하고자 포스트를 남긴다.

Expo Document(https://docs.expo.io/versions/latest/sdk/map-view/)에서 아주 쉽게 나와있듯이

import React from 'react';
import { MapView } from 'expo';

export default class App extends React.Component {
  render() {
    return (
      <MapView
        style={{ flex: 1 }}
        initialRegion={{
          latitude: 37.78825,
          longitude: -122.4324,
          latitudeDelta: 0.0922,
          longitudeDelta: 0.0421,
        }}
      />
    );
  }
}

위와 같은 예시를 통해서 쉽게 적용하는 방법은 확인이 가능하다.

 

Expo의 Mapview는 react-native-maps 모듈을 쓰는 것과 마찬가지로 parameter들을 수정하면 되므로 parameter들에 대한 설명은 react-native-maps의 readme(https://github.com/react-native-community/react-native-maps/blob/master/README.md)를 확인하면 된다.

 

그리고 Mapview를 사용하기 위해서는 Google Map Api Key 가 필요한데, Api Manager(https://console.developers.google.com/apis) 에서 Android App 에 사용할 Key를 발급받아서 사용하면 된다.

 

이와 관련해서는 잘 정리된 블로그가 많으므로 구글검색시 맨 위에 나오는 대표적인 글을 첨부한다.

https://blog.cosmosfarm.com/archives/389/%EA%B5%AC%EA%B8%80-%EC%A7%80%EB%8F%84-api-%ED%82%A4-%EB%B0%9C%EA%B8%89-%EB%B0%9B%EB%8A%94-%EB%B0%A9%EB%B2%95-maps-javascript-api/

구글 지도 API 키 발급 받는 방법 (Maps JavaScript API) - 코스모스팜 블로그

 

발급받은 키는 React Native 프로젝트 폴더 내의 App.json 에 아래와 같이 적용한다.

{
  "expo": {
    "name": "앱 이름 자리 입니다",
    "slug": "프로젝트 이름 자리입니다",
    "privacy": "public",
    "sdkVersion": "32.0.0",
    "platforms": [
      "ios",
      "android"
    ],
    "version": "1.0.0",
    "orientation": "portrait",
    "icon": "./assets/images/icon.png",
    "splash": {
      "image": "./assets/images/logo_A.png",
      "resizeMode": "contain",
      "backgroundColor": "#ffffff"
    },    
    "updates": {
      "fallbackToCacheTimeout": 0
    },
    "assetBundlePatterns": [
      "**/*"
    ],
    "ios": {
      "supportsTablet": true
    },
    "android": {
      "package": "com.패키지명.패키지명",
      "config": {
        "googleMaps": { "apiKey": "이곳에 API 키를 붙여 넣으면 됩니다" }   
     }
    }
  }
}

추가해야할 부분은 위 코드에서

 

"android": {
   "package": "com.패키지명.패키지명",
   "config": {
      "googleMaps": { "apiKey": "이 곳에 Api키를 넣어주세요" }   
   }
}

이 부분이다.

자신이 원하는 parameter를 적용하여 Mapview를 적용하면 React Native 앱 상에서

이와 같은 Google Maps 화면을 확인할 수 있다.

(IOS 에서는 애플 기본 지도가 사용되는 것으로 확인)

 

※ 참고로 맵 마커는

<MapView
	style={{ flex: 1 }}
	initialRegion={{
		latitude: 37.78825,
		longitude: -122.4324,
		latitudeDelta: 0.0922,
		longitudeDelta: 0.0421
	}}
	>
    <MapView.Marker
		coordinate={{
			latitude: 37.78825,
			longitude: -122.4324,
		}}                
	/>
</MapView>

위와 같이 MapView 내부에서 MapView.Marker 를 넣어서 추가하여 사용한다.