원래 파이어베이스로 연결한 로그인 회원가입을 먼저 올릴려고했지만 내가 도전해보겠다고 한(예전에 실패했어서 오기로 해보고싶어서 자진한..) 구글맵에 대해 먼저 기록해볼려고 한다.
우선 지금 당장 필요한 기능은..
- 구글맵 띄우기
- 사용자의 현재 위치값 받아오기
- 좌표값을 주소로 변환하기
이렇게 세가지가 된다. 우선 이번 벨로그는 구글맵 띄우기에 대해 써본다.
🚀 API 키 발급받기
구글맵을 띄우기 위해서 필요한 라이브러리와 API 들이 존재한다. 먼저 구글맵을 띄우기 위해선 google cloud platform 에서 API 키를 발급받아야한다.
Google Maps Platform 에 들어간 후 시작하기 버튼을 누른다.
- 위와 같은 화면이 뜨는데, mapAPI(내가 만든 프로젝트 이름) 을 누르고 우측 상단에 새 프로젝트를 누른 후 프로젝트 이름과, 결제계정, 위치를 입력해주고 만들기를 누르면 구글맵을 사용하기 위한 큰 틀은 완성했다고 볼 수 있다!
다음 순서로, 왼쪽 옵션 중에 API 및 서비스를 클릭한다.
- 이렇게 여러 API 들이 뜨는데 우선 나는 ios 로만 하겠다.
- 옆에 보면 'DISABLE' 이라고 돼있는데, 이는 내가 방금 만든 googele 프로젝트에 API 를 추가하지 않았기 때문인데 클릭하면 'ENABLE' 이라고 바뀌는 것을 확인할 수 있을 것이다.
- (추가로 내가 할려는 기능인 좌표값을 주소로 변환하기 이 부분을 구현하기 위해 Geocoding API 도 추가해야된다! 이 방법은 나중에 또 올리도록 하겠다!)
서비스를 추가했다면, 왼쪽 옵션 중에 키 및 사용자 인증 정보를 클릭한다.
키 표시를 누르면 발급된 API 키를 확인할 수 있다. 이제 이 API 키를 이용해서 googleMap 을 띄워보도록 하겠다.
🚀 IOS 설정하기
RN 은 설치가 반인거 같다. 그만큼 중요하다는 뜻인데, 부디 이 글을 읽고 다들 막힘없이 잘되길..! 구글맵을 띄우기 위해 라이브러리를 설치해야되는데
react-native-maps 이곳에서 설치를 했다. npm install 은 생략하고..! 코드를 podfile 어디에 복붙을 해야되는지 헷갈렸는데..
target 'healthshareapp' do pod 'react-native-google-maps', :path => rn_maps_path config = use_native_modules!바로 config = use_native_modules! 위에 복붙하면 되니 헷갈리지말쟈!
🚀 GoogleMap 띄우기
여기까지 별탈없이 왔다면 이제 구글맵을 띄울 일만 남았다. 방법은 매우 간단..
import MapView, { PROVIDER_GOOGLE } from 'react-native-maps'; export default () => ( <View> <MapView provider={PROVIDER_GOOGLE} region={{ latitude: 37.78825, longitude: -122.4324, latitudeDelta: 0.015, longitudeDelta: 0.0121, }} </MapView> </View> );를 그대로 복붙하면 적용이 된다.
- 근데 만약 MapView 가 안떠요.. 하시는 분들은 View 컴포넌트에 크기를 지정하면 MapView 가 보일 것이니 걱정하지 마시길..!
- 참고로 provider 속성에 아무것도 넣지 않는다면 AppleMap 이 뜨니 이 점 참고~
이번에 팀프로젝트를 하게돼서 이때까지 배운 내용을 총집합해서 쓸 수 있는 프로젝트를 구현할려고 하는데 다행히 처음에 했던 구글맵 띄우기엔 오류도 뜨고 (솔직히 지금은 오류가 왜 떴는지 모르겠음..) 오래걸리기도 했는데 한 번 했다고 이렇게 금방 되니까 기분은 좋거든요..
하지만 띄운다고 다 되는게 아니더라.. 이제 시작이였다.. 다음 주제는 더더 중요하고 어려웠으니 기록해야겠다! 커밍쑨..!
