How to draw circle around a pin using Google MAps API v2
Asked Answered
D

4

16

I am using the new API(Google Map API V2) for my android application, i have done creating the map and adding markers to it, now my task is to manually create a circle around any of the marker and also i want to provide a functionality to the user that he can increase the radius of that circle accordingly, for this i have given a bar, when user increases that bar the radius of circle will increase and vice versa.

If anybody knows how to do this using Google Map API V2 then please help,

thanks

Downhill answered 16/1, 2013 at 12:19 Comment(1)
Refer to #13991801Dharma
I
16

I have been working on this too and I found the following solution. It's still not perfect, because I had to make a very large Canvas to prevent the edge of the circle from becoming blurry.

private void addCircleToMap() {

    // circle settings  
    int radiusM = // your radius in meters
    double latitude = // your center latitude
    double longitude = // your center longitude
    LatLng latLng = new LatLng(latitude,longitude);

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

    // generate BitmapDescriptor from circle Bitmap
    BitmapDescriptor bmD = BitmapDescriptorFactory.fromBitmap(bm);

// mapView is the GoogleMap
    mapView.addGroundOverlay(new GroundOverlayOptions().
            image(bmD).
            position(latLng,radiusM*2,radiusM*2).
            transparency(0.4f));
}

-- EDIT -- Google updated the API. You can now easily add a circle to your map: https://developers.google.com/maps/documentation/android/shapes?hl=nl#circles

Ibbison answered 17/1, 2013 at 12:36 Comment(2)
Thanks for your precious code.. it helped me a lot.. but how to set the center for that circle? I need the center to be the marker itself..Christianson
@spes: the groundoverlay changes its size on zoom in/zoom out of the map. Is there any way to keep that constant ?Belia
O
11

This is better:

    double radiusInMeters = 100.0;
     //red outline
    int strokeColor = 0xffff0000;
    //opaque red fill
    int shadeColor = 0x44ff0000; 


    CircleOptions circleOptions = new CircleOptions().center(position).radius(radiusInMeters).fillColor(shadeColor).strokeColor(strokeColor).strokeWidth(2);
    mCircle = map.addCircle(circleOptions);

    MarkerOptions markerOptions = new MarkerOptions().position(position);
    mMarker = map.addMarker(markerOptions);
Orangewood answered 13/7, 2015 at 9:49 Comment(0)
R
5

Perhaps help you :

 GoogleMap map;
 // ... get a map.
 // Add a circle in Sydney
 Circle circle = map.addCircle(new CircleOptions()
     .center(new LatLng(-33.87365, 151.20689))
     .radius(10000)
     .strokeColor(Color.RED)
     .fillColor(Color.BLUE));

From here :

HERE

Rentfree answered 22/8, 2016 at 7:31 Comment(0)
M
1

Using this method you can select any marker & it will create the circle object for particular marker. you can dynamically change radius of the circle by passing the marker object & radius value to the createCircle() method.

 private GoogleMap mMap;
    /*Create circle objects*/
    Circle currentCircle;
     /**
     * create circle when user want to set region
     * @param currentMarker this is user selected marker
     * @param radius pass radius value to circle object
     */
    private void createCircle(Marker currentMarker ,Double radius){


          //check circle is exist or not 
               //if exist remove
               if(currentCircle!=null){
                 currentCircle.remove();
                 }
        currentCircle=mMap.addCircle(new CircleOptions().center(currentMarker.getPosition()).radius(radius)
            .strokeColor(Color.parseColor("#FF007A93"))
            .fillColor(Color.parseColor("#40007A93"))
            .strokeWidth(2));
        float zoomLevel = getZoomLevel(radius);
        mMap.animateCamera(CameraUpdateFactory.newLatLngZoom(currentMarker.getPosition(), zoomLevel));
    }
Mediocre answered 8/1, 2019 at 13:0 Comment(0)

© 2022 - 2024 — McMap. All rights reserved.