How to display a circle in GMSMapView

Question

I need to display a circle (as with MKCircle) on a GMSMapView. This is easy when using a MKMapView and MKCircle, but can't use MKCircle with GMSMapView. Any ideas?

Update:
This are the current(18.03.2013) options:
1. A ground marker containing a circle image.
2. A a circle made with several segments (polyline).

Edit:
3. Google added a GMSCircle (23.04.2013)

 GMSGroundOverlayOptions *overlayOptions = [GMSGroundOverlayOptions options];
    overlayOptions.icon = [UIImage imageNamed:@"circle"];
    overlayOptions.position = touchMapCoordinate;
    overlayOptions.bearing = 0;
    overlayOptions.zoomLevel = 14.3;
 [mapView addGroundOverlayWithOptions:overlayOptions];

For a circle image 40x40 pixels it looks ok. (radius is approximately 100 m)

Small segmented path solution:

    GMSPolylineOptions *circle = [GMSPolylineOptions options];
    CGPoint touchPoint = [mapView.projection pointForCoordinate:touchMapCoordinate];
    GMSMutablePath *path = [GMSMutablePath path];

    CGPoint circlePoint;

    for (int i = 0; i < 360; i++)
    { 
        circlePoint.x = touchPoint.x + radius * cos(i*M_PI/180);
        circlePoint.y = touchPoint.y + radius * sin(i*M_PI/180);

        CLLocationCoordinate2D aux = [mapView.projection coordinateForPoint:circlePoint];
        [path addCoordinate:aux];
    }

    circle.path = path;
    circle.width = 1;

    [mapView addPolylineWithOptions:circle];

EDIT : 08.05.2013

GMSCircle solution:

     CLLocationCoordinate2D circleCenter = CLLocationCoordinate2DMake(latitude, longitude);
     GMSCircle *circ = [GMSCircle circleWithPosition:circleCenter
                                     radius:1000];

     circ.fillColor = [UIColor blueColor];
     circ.strokeColor = [UIColor redColor];
     circ.strokeWidth = 5;
     circ.map = mapView;

I have no idea how to even start. I thought about using the GMSGroundOverlay and GMSGroundOverlayOptions adding a circle icon, but this means the circle has a specific radius all the time. — Bogus, Mar 13 '13 at 09:39

score 13 · Answer 1 · edited Jul 24 '20 at 14:24

It's a bit late since the question is over a year old, but Google searches led me here, so I thought I'd update this. Posterity 4TW!

There is now a GMSCircle which can do, as far as I know, just about everything an MKCircle can.
Google's documentation on the GMSCircle.

// Build a circle for the GMSMapView
GMSCircle *geoFenceCircle = [[GMSCircle alloc] init];
geoFenceCircle.radius = 130; // Meters
geoFenceCircle.position = SOME_CLLOCATION.coordinate; // Some CLLocationCoordinate2D position
geoFenceCircle.fillColor = [UIColor colorWithWhite:0.7 alpha:0.5];
geoFenceCircle.strokeWidth = 3;
geoFenceCircle.strokeColor = [UIColor orangeColor];
geoFenceCircle.map = mapView; // Add it to the map.

//Updating code for Swift 5.3

 let circle = GMSCircle(position: position, radius:10)
 circle.fillColor = .clear
 circle.strokeWidth = 3
 circle.strokeColor = .black
 circle.map = mapView

It behaves very similarly to an MKCircle (overlay) in that it resizes with the zoom level of the map, etc. Please disregard the blue circle in the center; that's the user location shown on the map view, and I just used the same coordinate for the center point of the GMSCircle.

Super easy. Check out the images:

One zoom level: enter image description here

And here, we're zoomed out a bit: enter image description here

GMSOverlays have a 'title' property which can be used to add text to certain marker types. If that doesn't get you what you want, and this is something I've done with success in the past, you can subclass GMSMarker and change the icon to be the text you want (you'll have to create an image out of it, as I recall). Then you can place it at the same location as your circle (or add the circle as a member in your GMSMarker subclass). https://developers.google.com/maps/documentation/ios-sdk/reference/interface_g_m_s_overlay — u2Fan, Oct 29 '15 at 13:45

score 1 · Accepted Answer · answered Mar 15 '13 at 23:36

At the moment the SDK doesn't support circles, but there is a feature request to add circles here:

https://code.google.com/p/gmaps-api-issues/issues/detail?id=4971

In the meantime you could maybe fake a circle by drawing a polyline, with several short segments?

score 0 · Answer 3 · answered May 26 '18 at 17:39

func mapView(_ mapView: GMSMapView, didChange position: GMSCameraPosition) {
    // Make sure cicle is a GMSCircle Object  and it is a class variable
    circle.map = nil

    let point = mapView.center
    circle.position = mapView.projection.coordinate(for: point)
    circle.radius = 130.0
    circle.fillColor = .clear
    circle.strokeColor = .black
    circle.strokeWidth = 3.4
    circle.map = mapView
}

How to display a circle in GMSMapView

3 Answers3

Linked