[react-native] react-native-maps를 사용한 Google map 연동

우선  저는 expo를 사용했습니다!

react native에서 지도를 사용하기 위해 react-native-maps를 사용해보았습니다.

우선 첫번째로 google 클라우드 플랫폼에서 map api를 만들어 줍니다.

Google 클라우드 플랫폼

 

만드는 방법은

 

사용자 인징 정보 만들기를 눌러준 후

 

 

API 키를 만들어 줍니다. 키제한 등 보안 관련 옵션들은 선택사항이더군요

그 다음 app.config.ts 키값을 넣어줘야 합니다.

// app.config.ts
ios: {
    supportsTablet: true,
    bundleIdentifier: "",
    config: {
      googleMapsApiKey: process.env.GOOGLE_MAP_API_KEY,
    },
  },

이후 

yarn add react-native-maps

or

npm install react-native-maps

react-native-maps를 설치해줍니다.

  return (
    <View style={styles.container}>
      <MapView
        style={styles.map}
        provider={PROVIDER_GOOGLE}
        showsUserLocation={true}
        region={{
          latitude: userLocation ? userLocation.coords.latitude : 37.5666103,
          longitude: userLocation ? userLocation.coords.longitude : 126.9783882,
          latitudeDelta: 0.001,
          longitudeDelta: 0.008,
        }}
      />
    </View>
  );
}

        provider={PROVIDER_GOOGLE}을 MapView에 넣어주면 지도가 나타나게 됩니다. showUserLocation을 true로 해주면 자신의 위치가 marker로 표시가 됩니다.

 

 

 

 

추가적으로 키 제한사항을 설정하지 않으면 모든 애플리케이션에서 api에 접근이 가능하니 키 제한사항을 꼭 설정하시길..!