YuanLiou/google-map-marker-indicator

A simple and quick library to add a number indicator on the marker of Android Google Map

google-map-marker-indicator

A simple and quick library to add number indicator on the marker of Android Google Map

How to use

1. Create a MarkerIndicator

    // Create MarkerIndicator
    val markerIndicatorBuilder = MarkerIndicator.MarkerIndicatorBuilder(context)
    
    // set to `false` if you wish to use the value from `R.dimen.value`
    // or a pure pixel value
    markerIndicatorBuilder.setAutoConvertToDp(true)
    
    markerIndicatorBuilder.setTextSize(13f)
    markerIndicatorBuilder.setTextColor(R.color.primary_orange)
    markerIndicatorBuilder.setStrokeWidth(1.2f)
    markerIndicatorBuilder.setStrokeColor(R.color.primary_orange)
    markerIndicatorBuilder.setIndicatorRadius(9f)
    markerIndicatorBuilder.setBackgroundColor(R.color.white)
    markerIndicatorBuilder.setIndicatorMarginEnd(0.5f)
    markerIndicatorBuilder.setIndicatorMarginTop(2.7f)
    
    val markerIndicator = markerIndicatorBuilder.build()

2. Create a marker Bitmap with indicator attached via MarkerIndicator

    // Create Marker Bitmap
    val pinBitmap = markerIndicator.attachToMarkerDrawable(R.drawable.ic_pin, "<your_number_string>")

3. Use BitmapDescriptorFactory.fromBitmap(indicatorAttachedBitmap) to create BitmapDescriptor

    // Create BitmapDescriptor
    val bitmapDescriptor = BitmapDescriptorFactory.fromBitmap(pinBitmap)

4. Use this BitmapDescriptor to create marker.

    // Create Marker
    val options = MarkerOptions().also {
        it.position(latLng)
        it.title(title)
        it.snippet(snippet)
        it.icon(bitmapDescriptor)
    }
    val generatedMarker = googleMap?.addMarker(options)

We're done!

Integration

1. Add it in your root build.gradle at the end of repositories

allprojects {
    repositories {
        maven { url 'https://jitpack.io' }
    }
}

2. Add the dependency

implementation 'com.github.YuanLiou:google-map-marker-indicator:{latest_version}'

Other

Enable drawing debug Rect

Preview:

It'll draw a semi-transparent gray layer to the marker.
This feature help to check the actual marker size.

    // Enable drawing debug Rect
    markerIndicator.setDrawDebugBackgroundRect(true)