Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to display a circle in GMSMapView

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;
like image 304
Bogus Avatar asked Mar 13 '13 08:03

Bogus


2 Answers

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

like image 56
u2Fan Avatar answered Nov 13 '22 01:11

u2Fan


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?

like image 1
Saxon Druce Avatar answered Nov 13 '22 00:11

Saxon Druce