Google map api 적용하기

안녕하세요. 오늘은 map api 적용 중 발생한 문제와 해결 방안에 대해 간단히 써보려고 합니다!!!

새로 토이 프로젝트를 진행하게 되었고,

사용할 api 는 

google / facebook (+kakao, naver) login api

google / kakao / naver ma api

정도로 간단히 생각하고 있는데요(초기 진행은.. 추후 더 api 나 라이브러리 추가예정입니다 ㅎㅎ )

google map api 를 오랜만에 쓰다보니 어렵진 않지만 복잡?하더라구요!

그럼 google map api 적용을 해보겠습니다!!!!!!!!!!!

저는 https://webnautes.tistory.com/647 이 싸이트를 참고했어요!

간단히 설명드리자면,

https://console.developers.google.com/apis/dashboard

에 들어와 

1. 프로젝트 선택(만들기) -> 만들기 -> 프로젝트 이름(아무거나) -> 만들기 ->프로젝트 완료~!!!

2. Api 및 서비스 사용 설정 -> Maps SDK for Android 선택 -> 사용 설정 -> 사용자 인증 정보 -> 만들기 -> api키 선택 -> 키제한

3. 하단 애플리케이션 제한 사항에서 "Android 앱" 을 클릭 -> 패키지 이름 및 지문 추가 클릭 -> 패키지 이름과 SHA-1 인증서 지문 복붙하여 입력 후 완료

cf) 패키지 이름은 android studio -> manifest 에서 찾을 수 있습니다.

cd) SHA-1 인증서 지문은 window키+R 을 눌러 "cmd"입력 후 커맨드 창이 나타나면 "keytool -list -v -keystore "%USERPROFILE%\.android\debug.keystore" -alias androiddebugkey -storepass android -keypass android" 을 입력하면 됩니다.

4. 이제 api키가 뚜둔!!! (복사복사~~)

5. Android studio -> Manifest -> <application ~~~> 요기 <activity ~~~> </activity> </application> 이 사이에 첫번째 "요기" 안에

<meta-data
    android:name="com.google.android.geo.API_KEY"
    android:value="API KEY" />

이렇게 넣어주면 됩니다~!!

6. tools -> SDK Manager -> SDK Tools -> Google Play service 항목 체크 -> Apply

7. gradle 에 

implementation 'com.google.android.gms:play-services-maps:15.0.1'
implementation 'com.google.android.gms:play-services-location:15.0.1'

넣고 SYNC~~~~~~

하면 준비 완료~~

8. 이제 사용하고자 하는 layout 안에 

<fragment
    android:id="@+id/map"
    class="com.google.android.gms.maps.MapFragment"
    android:layout_width="match_parent"
    android:layout_height="match_parent" />

를 넣어주면 준비 완료!!

마지막인 java or kotlin 파일로 갑니다.

9. 파일에서 OnMapReadyCallback를 implements -> onCreate 

// map api 연동
val fragmentManager = fragmentManager
val mapFragment = fragmentManager.findFragmentById(R.id.main_map) as MapFragment
mapFragment.getMapAsync(this)       // getMapAsync() 메소드를 호출하여 GoogleMap 객체가 준비될 때 실행될 콜백을 등록

를 넣어주고 위에 상속을 통해 생긴 아래 함수에 아래와 같이 넣어주면 "여의도"를 현재 위치로 지도를 보여줄 겁니다!!!

override fun onMapReady(map: GoogleMap?) {
    val SEOUL = LatLng(37.52487, 126.92723)     // 서울 여의도에 대한 위치 설정

    // 구글 맵에 표시할 마커에 대한 옵션 설정
    val markerOptions = MarkerOptions()
    markerOptions.position(SEOUL)
    markerOptions.title("서울")
    markerOptions.snippet("여의도")

    map?.let {
        it.addMarker(markerOptions)     // // 마커를 생성한다.
        it.moveCamera(CameraUpdateFactory.newLatLng(SEOUL))     // 카메라를 여의도 위치로 옮긴다.
        it.animateCamera(CameraUpdateFactory.zoomTo(10f))
    }
}

10. 이제 커스텀만...남았다....

이렇게 하면 google map api 를 내 핸드폰에서 보여주게 됩니다!!

제가 당면한 문제!!!!!!!!!!!!!

여기서 저는 main activity 에 bottom navigation 을 달아서 fragment 에서 map을 보여주려 했습니다.

하지만 frameLayout으로 만들어 놓은 FragmentB.kt 파일에서 또 map fragment를 불러오지 cast 실패가 계속 나더라구요. 

FrameLayout 에서 fragment 를 호출했지만, 그 fragment 를 만드는 layout 안에 또 map을 가진 fragment를 정의해주니 에러가 나는거죠!

이것저것 다 찾압아보며 해결하려 했지만만..

역시나 저의 짧은 지식으론 실패..!!(기존 앱을 보면서 만들었는데, 그건 fragment 에서 보여주는 것처럼 보였습니다.)

그래서 저는 생각을 바꿨습니당.

그게 뭐냐!?!?!?

해결 방안 : 바로 바텀시트를 포함한 액티비티에서 google map fragment 를 출력해주고, 보여주고 싶은 fragment 클릭 시 view 를 visible로, 나머지 클릭 시 gone 으로 해주는 방안을 선택했습니다!!!!

즉, 바텀시트에 있는 아이콘을 누르면 frameLayout에서 구현한 fragment 를 보여주게 되는데, 그 fragment 를 activity 안에서 구현하는 것입니다. 쉽게 말해 Activity.kt 안에 fragment 를 생성해 visible / gone 으로 보여주는것이죠!!

이렇게 하면 위의 에러 없이 잘 작동 되는 것을 볼 수 있습니다.

다른 해결방안이 있다면 댓글 주시면 감사하겠습니다!!!