[GO] Correspondence between RecyclerView and Marker (Kotlin)

What you want to make

Scrolling the RecyclerView will take you to the Google Map Marker that corresponds to that item, and tapping the Marker on the Map will cause the RecyclerView to scroll to the item. I also use CardView and Snaphelper, but I won't explain them.

environment

Android Studio Kotlin Maps SDK for Android

Method

RecyclerView -> Marker The order on the RecyclerView is judged by the scroll amount, and the map is moved to the position of the item.

//recycler -> marker
recyclerView.addOnScrollListener(object :RecyclerView.OnScrollListener(){//Scroll to move to marker
    override fun onScrolled(recyclerView: RecyclerView, dx: Int, dy: Int) {//Position judgment based on the scrolled amount
        super.onScrolled(recyclerView, dx, dy)
        val offset = recyclerView.computeHorizontalScrollOffset()
        val itemWidth = cafeCardRoot.width
        val edgeMargin = (recyclerView.width - itemWidth)/2
        val position = (offset + edgeMargin) / (itemWidth + edgeMargin/2)

        if (myCafesData[position].latitude == "" || myCafesData[position].longitude == "") {
            return
        }else{
            val moveLatLng = LatLng(myCafesData[position].latitude.toDouble(),myCafesData[position].longitude.toDouble())
            mMap.animateCamera(CameraUpdateFactory.newLatLngZoom(moveLatLng, 16F))
        }
    }
})

Marker -> RecyclerView Determine the order of the markers and scroll to that item.

//marker -> recycler
mMap.setOnMarkerClickListener(object : GoogleMap.OnMarkerClickListener{
    override fun onMarkerClick(marker: Marker?): Boolean {
        val markerPosition = marker?.position
        var selectedMarker = -1
        for (i in 0..myCafesData.size-1) {
            if (myCafesData[i].latitude == "" || myCafesData[i].longitude == "") {
                continue
            } else {
                if (markerPosition?.latitude == myCafesData[i].latitude.toDouble() && markerPosition.longitude == myCafesData[i].longitude.toDouble()) {
                    selectedMarker = i//Marker position judgment
                }
            }
        }
        recyclerView.smoothScrollToPosition(selectedMarker)//scroll
        return false
    }
})

Task

Since RecyclerView and Marker are not directly linked, you cannot change the size of the marker with Recycler-> Marker. Do you want the item data to have RecyclerView and Marker information?

I would appreciate it if you could teach me how to solve the above problems. Please!

Afterword

This article is a reprint from my blog. We are updating programming articles, so please come visit us. https://www.imagawahibana.com/