Add a circle around the marker, when marker becomes visible

2.4k Views Asked by At

Currently I am using Google Maps Android API Utility for clustering, but I didn't find the way to add a circle around the marker when it becomes visible/rendered from the cluster. I want each marker to have a circle around it. IS there any way in Android maps Extension library to achieve this ?

This is when clustered when clustered

When Cluster Rendered current behavior

When rendered cluster this is the current behavior

Desired behavior

Desired behavior

2

There are 2 best solutions below

8
On BEST ANSWER

I think this library for clustering can help you. Android Maps Extensions https://github.com/mg6maciej/android-maps-extensions

Android Get the markers that are not clustered

If you just need to change marker's icon, you can make png-image (for example, with default marker icon and circle) and paste it to marker as resource.

map.addMarker(new MarkerOptions()
     .icon(BitmapDescriptorFactory.fromResource(R.drawable.marker_circle)));

If you need custom circle, you create it programmatically, but you still need custom marker icon (and of course provide different versions (hdpi, xhdpi...) for resize)

// circle
int diameter = 500;
Bitmap bm = Bitmap.createBitmap(diameter, diameter, Bitmap.Config.A
Canvas canvas = new Canvas(bm);
Paint p = new Paint();
p.setColor(getResources().getColor(R.color.green));
canvas.drawCircle(diameter / 2, diameter / 2, diameter / 2, p);


// marker icon through Drawable
Drawable drawable = getResources().getDrawable(R.drawable.marker_icon, null);
// you should choose bounds
// drawable.setBounds(left, top, right, bottom);
drawable.draw(canvas);

//OR marker icon through Bitmap
Bitmap bmIcon = BitmapFactory.decodeResource(getResources(), R.drawable.marker_icon);
// choose correct top and left margin
canvas.drawBitmap(bmIcon, diameter / 2, diameter / 2, p);


map.addMarker(new MarkerOptions().icon(BitmapDescriptorFactory.fromBitmap(bm)));
0
On

Google maps now has an API for drawing a circle you can use it combined with a simple marker, it should do the same effect