[Kotlin]Fragment에서 MapView로 GoogleMap사용하기

Fragment에서 MapView를 사용해서 GoogleMap을 사용하려고 했는데,
찾아보니 거의 다 Activit기반이거나 Fragment에서 Map을 불러오는 방식을 사용하더군요.

 

전 구글이 쓰라고 만들어 놓은 MapView를 사용해서 만들겠습니다.
기본셋팅은 어떤 방식이든 똑같으니 생략하겠습니다.
좀 지난 예전글이라도 거의 비슷할껍니다.

 

저 같은 경우는 진행하다가 Firebase에서 사용하는 [google-services.json]파일이 없다는
[File google-services.json is missing. The Google Services Plugin cannot function without it.]에러가 떠서
Firebase 등록 작업을 해주었습니다.

 

---

1. 사용할 Fragment의 xml에 MapView를 넣어줍니다.( 예제는 fragment_contact_us.xml)

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22

<ScrollView xmlns:android="http://schemas.android.com/apk/res/android"     xmlns:app="http://schemas.android.com/apk/res-auto"     xmlns:tools="http://schemas.android.com/tools"     android:layout_width="match_parent"     android:layout_height="match_parent"     android:background="@android:color/white"     android:fillViewport="true"     android:orientation="vertical"     tools:context=".menu.ContactUsFragment">       <LinearLayout         android:layout_width="match_parent"         android:layout_height="wrap_content"         android:orientation="vertical">                  <com.google.android.gms.maps.MapView                 android:id="@+id/mv_contactUs_gMap"                 android:layout_width="match_parent"                 android:layout_height="200dp"/>       </LinearLayout> </ScrollView> Colored by Color Scripter

cs

 

2. 해당 Fragment의 코드부 작성 (예제는 ContactUsFragment.kt)

2-1. OnMapReadyCallback 상속
     class ContactUsFragment : Fragment(), OnMapReadyCallback {}

2-2. onMapReady를 override하기.

override fun onMapReady(googleMap: GoogleMap) {}

 

2-3. private lateinit var mView: MapView 추가

2-4. onCreateView코드 작성

override fun onCreateView(
        inflater: LayoutInflater, container: ViewGroup?,
        savedInstanceState: Bundle?
    ): View? {
        // Inflate the layout for this fragment
        var rootView = inflater.inflate(R.layout.fragment_contact_us, container, false)
        mView = rootView.findViewById(R.id.mv_contactUs_gMap) as MyMapView
        mView.onCreate(savedInstanceState)
        mView.getMapAsync(this)
        return rootView
    }

관련 내용 찾아보면, 다른 부분은 다 비슷한데, onCreateView에서 [mView.onCreate(savedInstanceState)] 이 부분이 없는 경우가 많더라구요 ㅠ

 

2-5. onStart, onStop, onResume, onPause, onLowMemory, onDestroy코드 작성

    override fun onStart() {
        super.onStart()
        mView.onStart()
    }
    override fun onStop() {
        super.onStop()
        mView.onStop()
    }
    override fun onResume() {
        super.onResume()
        mView.onResume()
    }
    override fun onPause() {
        super.onPause()
        mView.onPause()
    }
    override fun onLowMemory() {
        super.onLowMemory()
        mView.onLowMemory()
    }
    override fun onDestroy() {
        mView.onDestroy()
        super.onDestroy()
    }

 

 

---

전체코드

class ContactUsFragment : Fragment(), OnMapReadyCallback {
 
    private lateinit var mView: MyMapView
 
    override fun onCreateView(
        inflater: LayoutInflater, container: ViewGroup?,
        savedInstanceState: Bundle?
    ): View? {
        // Inflate the layout for this fragment
        var rootView = inflater.inflate(R.layout.fragment_contact_us, container, false)
 
        mView = rootView.findViewById(R.id.mv_contactUs_gMap) as MyMapView
        mView.onCreate(savedInstanceState)
        mView.getMapAsync(this)
 
        return rootView
    }
 
 
 
    override fun onMapReady(googleMap: GoogleMap) {
        val myLocation = LatLng(37.654601, 127.060530)
        googleMap.moveCamera(CameraUpdateFactory.newLatLng(seoul))
        googleMap.moveCamera(CameraUpdateFactory.zoomTo(15f))
 
        //마커 출력
        val marker = MarkerOptions()
                        .position(seoul)
                        .title("Nowon")
                        .snippet("노원역입니다.")
        googleMap?.addMarker(marker)
    }
 
 
    override fun onStart() {
        super.onStart()
        mView.onStart()
    }
 
    override fun onStop() {
        super.onStop()
        mView.onStop()
    }
 
    override fun onResume() {
        super.onResume()
        mView.onResume()
    }
 
    override fun onPause() {
        super.onPause()
        mView.onPause()
    }
 
    override fun onLowMemory() {
        super.onLowMemory()
        mView.onLowMemory()
    }
 
    override fun onDestroy() {
        mView.onDestroy()
        super.onDestroy()
    }
 
 
 
}