React Native에서 구글 지도 사용하기

React Native에서 구글 지도 사용하기

1. API 키 발급

2. 라이브러리 설치

3. 적용

API 키 발급

react-native-maps 라이브러리를 사용할 때는 구글 지도 API가 필요합니다.

구글 지도 API 사이트에 들어가 키를 발급 받아주세요.

라이브러리 설치

NPM과 Yarn 설치 방법 모두 설명하겠습니다.

NPM의 경우:

npm install react-native-maps --save

Yarn의 경우 :

yarn add react-native-maps

모듈 설치가 완료되면, 라이브러리를 링크해주셔야 합니다.

react-native link react-native-maps

링크가 완료되면, android - app - src - AndroidManifest.xml 파일을 열어 구글 지도 API 키를 추가해주세요.

<manifest xmlns:android="http://schemas.android.com/apk/res/android">

...

<meta-data

android:name="com.google.android.geo.API_KEY"

android:value="API Key"/>

</application>

</manifest>

이런 식으로 API 키를 넣어주시면 됩니다.

적용

import MapView from 'react-native-maps'; // 지도 라이브러리

export default class App extends Component {

state = {

active: "home"

}

render() {

return (

<View>

<MapView

initialRegion={{

latitude: 37.78825,

longitude: -122.4324,

latitudeDelta: 0.0922,

longitudeDelta: 0.0421,

}}

/>

)

}

}

이런식으로 써주시면 됩니다.

latitude는 경도, longitude 위도 값입니다.