Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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.
like image 949
Jared Avatar asked Mar 12 '15 05:03

Jared


People also ask

How do I draw a radius around a point on Google Maps?

Click on the map and create a popup marker to select the point. From there, opt for the “Draw Radius.” Choose the proximity distance from the given address found within the radius options in the software.

Does Google Maps have a radius tool?

Google Maps does not support the radius functionality, which means that you can't determine the radius around a given location. But you can measure the distance between two or more points. As a quick reminder, the radius of a circle is the distance from its edge to its center.

How do I draw a path in Google Maps iOS?

To create a route in Google Maps, open "Your places" and then choose "Create Map" in the "Maps" tab. To draw a route, click "Add directions," choose transportation mode, and enter start and end points. You can draw lines and shapes on maps by clicking "Draw a line" and selecting "Add line or shape."


1 Answers

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;
like image 152
iOS Developer Avatar answered Oct 02 '22 13:10

iOS Developer