CODEWITHSUNDEEP
iosswiftgoogle-maps-sdk-ios
Jared
Jared

Reputation: 81

How Can I Draw A Radius Around A Map Marker Using Google Maps SDK (Swift/iOS)?

There are two ways a user can place a marker on the map within the app- via the UISearchBar above the map (not completed yet), and by long pressing on the map where they'd like the marker to appear. I am using a global variable for the marker, because the user is restricted to setting only one marker on the map. Whenever the marker is created, I would like to draw a radius (circle) around the marker. Here is my code so far:

var mapMarker = GMSMarker()
...

 //This function dectects a long press on the map and places a marker at the coordinates of the long press.
func mapView(mapView: GMSMapView!, didLongPressAtCoordinate coordinate: CLLocationCoordinate2D) {

        //Set variable to latitude of didLongPressAtCoordinate
        var latitude = coordinate.latitude

        //Set variable to longitude of didLongPressAtCoordinate
        var longitude = coordinate.longitude

        //Feed position to mapMarker
        mapMarker.position = CLLocationCoordinate2DMake(latitude, longitude)

        //Define attributes of the mapMarker.
        mapMarker.icon = UIImage(named: "mapmarkericon")

        //Set icon anchor point
        mapMarker.groundAnchor = CGPoint(x: 0.5, y: 0.5)

        //Enable animation on mapMarker
        mapMarker.appearAnimation = kGMSMarkerAnimationPop

        //Display the mapMarker on the mapView.
        mapMarker.map = mapView

        drawCircle(coordinate)

        }

func drawCircle(position: CLLocationCoordinate2D) {

    //var latitude = position.latitude
    //var longitude = position.longitude
    //var circleCenter = CLLocationCoordinate2DMake(latitude, longitude)
    var circle = GMSCircle(position: position, radius: 3000)
    circle.strokeColor = UIColor.blueColor()
    circle.fillColor = UIColor(red: 0, green: 0, blue: 0.35, alpha: 0.05)
    circle.map = mapView

}

Admittedly, this is my first iOS/Swift app. I figured if I passed the coordinates from didLongPressAtCoordinate to the drawCircle() function, but apparently I'm doing something wrong. I've been searching all day for help, but have only turned up stuff for Android and Google Maps API v3. Thanks!

EDIT My code does work, but the radius doesn't scale, and the icon was appearing over the icon. When I zoomed in on the map, I was able to see the radius. There are three issues:

  1. The icon doesn't scale based on the map's zoom level.
  2. The radius doesn't scale based on the map's zoom level.
  3. If the marker position is updated, the radius doesn't move with it. Instead, a new radius is drawn...so there are two radii on the map.

Upvotes: 7

Views: 11329

Answers (2)

Yogesh Solanki
Yogesh Solanki

Reputation: 487

Here is swift code to draw circle on specified radius in mile

let circleCenter : CLLocationCoordinate2D  = CLLocationCoordinate2DMake(centerLattitude, centerLongitude);
let circ = GMSCircle(position: circleCenter, radius: distanceInMile * 1609.34)
circ.fillColor = UIColor(red: 0.0, green: 0.7, blue: 0, alpha: 0.1)
circ.strokeColor = UIColor(red: 255/255, green: 153/255, blue: 51/255, alpha: 0.5)
circ.strokeWidth = 2.5;
circ.map = self.googleMapView;

Upvotes: 13

Saxon Druce
Saxon Druce

Reputation: 17624

This is kind of three separate questions, but anyway:

1.

The GMSMarker is always drawn at the same size (in pixels), regardless of the map scale. For an image which scales with the map, have a look at GMSGroundOverlay.

2.

You've defined the radius as 3000 metres, so it should always be that size in metres, and so scale with the scale of the map. Or did you want it to be a fixed size in pixels, so get bigger in metres as you zoom out?

3.

You'll need to store the circle as a member (like you do with the marker), and update its position every time you move, instead of always create a new circle.

Upvotes: 2

Related Questions