how to create a custom callout button from each annotation view?

Question

Im trying to create a button within each annotation view to bring the user to a new page custom to the selected annotation. I've successfully implemented the mapview to show the annotations with titles and subtitles loaded from my parse database but am struggling to find a way of 1) adding a button to the annotation view to bring the user to a new view 2) finding a way of creating custom views for each of the annotations when selected. Any help would be greatly appreciated ?

Code

class ViewController: UIViewController, MKMapViewDelegate, CLLocationManagerDelegate {

    @IBOutlet weak var mapView: MKMapView!

    var MapViewLocationManager:CLLocationManager! = CLLocationManager()
    let btn = UIButton(type: .DetailDisclosure)


    override func viewDidLoad() {
        super.viewDidLoad()

        mapView.showsUserLocation = true
        mapView.delegate = self
        MapViewLocationManager.delegate = self
        MapViewLocationManager.startUpdatingLocation()
        mapView.setUserTrackingMode(MKUserTrackingMode.Follow, animated: true)

    }

    override func viewDidAppear(animated: Bool) {
        let annotationQuery = PFQuery(className: "Clubs")
        annotationQuery.findObjectsInBackgroundWithBlock {
            (clubs, error) -> Void in
            if error == nil {
                // The find succeeded.
                print("Successful query for annotations")
                // Do something with the found objects
                let myClubs = clubs! as [PFObject]
                for club in myClubs {

                    //data for annotation
                    let annotation = MKPointAnnotation()
                    let place = club["location"] as? PFGeoPoint
                    let clubName = club["clubName"] as? String
                    let stadiumName = club["stadium"] as? String
                    annotation.title = clubName
                    annotation.subtitle = stadiumName
                    annotation.coordinate = CLLocationCoordinate2DMake(place!.latitude,place!.longitude)

                    //add annotations
                    self.mapView.addAnnotation(annotation)
                }


            } else {
                // Log details of the failure
                print("Error: \(error)")
            }
        }

    }

one option is that add uipopover (if iPad) or customer popover view on selected annotation. You can customise popover items as per your need. — Gagan_iOS, Jan 27 '16 at 12:49
please go through few links http://www.singsys.com/blog/use-mapkit-framework-to-create-a-custom-annotation-view-over-map-view/ https://bakyelli.wordpress.com/2013/10/13/creating-custom-map-annotations-using-mkannotation-protocol/ http://stackoverflow.com/questions/16252764/how-to-create-custom-mkannotationview-and-custom-annotation-title-and-subtitle — Gagan_iOS, Jan 27 '16 at 13:27

score 0 · Answer 1 · answered Jan 27 '16 at 13:04

This is Objective-C solution, hope it may help you. To set button to annotationView,

    UIButton *detailButton = [UIButton buttonWithType:UIButtonTypeDetailDisclosure];
    annotationView.rightCalloutAccessoryView = detailButton;

When click performed on this button, following method called like delegate, so override following method too,

- (void)mapView:(MKMapView *)mapView annotationView:(MKAnnotationView *)view calloutAccessoryControlTapped:(UIControl *)control

You can do whatever customisation you want in above method because you know that user tapped on accessory view by now.

Please provide Swift answers to Swift questions. Thanks. – Eric Aya Jan 28 '16 at 11:18 — Eric Aya, Jan 28 '16 at 11:18

score 0 · Accepted Answer · answered Jan 28 '16 at 01:45

For 1st - You can use leftCalloutAccessoryView & rightCalloutAccessoryView on annoationView. You will have to implement MapViewDelegate mapView(_:viewForAnnotation:).

For 2nd - Similar to calloutAccessoryView, you have access to detailCalloutAccessoryView on annoationView. You can use that to customize your callout.

how to create a custom callout button from each annotation view?

2 Answers2