Loading..
🡩

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

2018.10.10 00:46

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 위도 값입니다.