How to draw transparent circles on Google Maps API

Question

I try to draw circles on the Google Maps API, which are transparent.

CircleOptions circleOptions = new CircleOptions()
        .center(new LatLng(lat, lon))
        .radius(50.0)
        .strokeColor(Color.TRANSPARENT)
        .strokeWidth(1)
        .fillColor(Color.CYAN); // 

But I like to draw them transparently, so that I can see the map behind? How could I do that?

Necropolis

Answer 1

For mGoogleMap as GoogleMap object, with latitude longitude given as

LatLng currentLatLon = new LatLng(lat double value, lng double value);

This is the way to draw circle in google maps

mGoogleMap.addCircle(new CircleOptions()
                    .center(currentLatLon)
                    .radius(150)
                    .strokeColor(Color.RED)
                    .fillColor(0x220000FF)
                    .strokeWidth(5)
                    );

Greathouse

Yes you're right. The RGB color codes are 0000FF and the transparency layer is in the beginning 0x22. I tought it was the last byte pair. – Necropolis

Since when has the transparency channel been AA and not DD in 0xAABBCCDD? That is so wrong! But thank you for letting us know! – Tragedian

Answer 2

This will add the transparent circle around the marker

Circle mCircle = mMap.addCircle(new CircleOptions()
                 .center(new LatLng(mCurrentLocation.getLatitude(), mCurrentLocation.getLongitude()))
                 .radius(500)
                 .strokeWidth(0)
                 .strokeColor(Color.parseColor("#2271cce7"))
                 .fillColor(Color.parseColor("#2271cce7")));

For the Transparent Color you can set it to any Color using i.e #2271cce7

In the above the actual color code is #71cce7 and the first two digits of 22 indicate the transparency which can be set to any value to either increase or decrease transparency.

View Sample

Nathalie

Answer 3

It's been a while that google map widget of Jetpack Compose has a Circle for it's marker. The Circle has a property of fillColor in which you can pass your desired color. If you want a fully transparent circle you can pass Color.TRANSPARENT and pass a color for the stroke color of the circle so it'll be visible that there is a circle. But if you already have a color but at the same time you want the map behind the circle to be visible, therefore you need your circle to accept a color with transparency you can use alpha.

Circle(
        center = geofenceItem.latLng,
        radius = geofenceItem.radius.toDouble(),
        fillColor = Color.Blue.copy(alpha = 0.4f),
        strokeWidth = 1f,
        strokeColor = Color.Green)

Trilbi