How to add a button to an annotation

Have you ever seen the info button used in the maps application on your iOS device?

In this tutorial you would learn to use your own button for your annation, in an Xcode project.

You could download the 'Final project', how to add a button to your annotation, from the attachments on the right column.

This tutorial is based on my tutorial 'Add an annotation to a MapView'. WHen you don't know how to add annotations you will follow that tutorial first.

Download de compressed 'Working Project' folder from the attachments. Uncompress the downloaded .zip file. Open the unzipped project in Xcode.

Open the 'MapViewController.m' and change the mapView:viewForAnnotation: method. Fill it with the code below. Now you're creating two new UIButton objects for the rightCalloutAccessoryView and theleftCalloutAccessoryView. 

- (MKAnnotationView *)mapView:(MKMapView *)mapView viewForAnnotation:(id <MKAnnotation>)annotation {
 
    static NSString *identifier = @"MyLocation";
    if ([annotation isKindOfClass:[PlaceMark class]]) {
 
        MKPinAnnotationView *annotationView = 
        (MKPinAnnotationView *)[myMapView dequeueReusableAnnotationViewWithIdentifier:identifier];
 
        if (annotationView == nil) {
            annotationView = [[MKPinAnnotationView alloc] 
                              initWithAnnotation:annotation 
                              reuseIdentifier:identifier];
        } else {
            annotationView.annotation = annotation;
        }
 
        annotationView.enabled = YES;
        annotationView.canShowCallout = YES;
 
        // Create a UIButton object to add on the 
        UIButton *rightButton = [UIButton buttonWithType:UIButtonTypeDetailDisclosure];
        [rightButton setTitle:annotation.title forState:UIControlStateNormal];
        [annotationView setRightCalloutAccessoryView:rightButton];
 
        UIButton *leftButton = [UIButton buttonWithType:UIButtonTypeInfoLight];
        [leftButton setTitle:annotation.title forState:UIControlStateNormal];
        [annotationView setLeftCalloutAccessoryView:leftButton];
 
        return annotationView;
    }
 
    return nil; 
}

Now it;s time to let the MKMapView fires his methods to your controller. Let your controller know he's the delegate of MKMapView. Open the 'MapViewController.h' and the MKMapViewDelegate. See the code below.

#import <UIKit/UIKit.h>
#import <MapKit/MapKit.h>
#import <CoreLocation/CoreLocation.h>
 
@interface MapViewController : UIViewController <CLLocationManagerDelegate, MKMapViewDelegate> {
    CLLocationManager *locationManager;
}
 
@property (retain, nonatomic) IBOutlet MKMapView *myMapView;
@property (retain, nonatomic) CLLocationManager *locationManager;
 
@end

Turn back to your 'MapViewController.m' and implement the mapView:annotationView:calloutAccessoryControlTapped: method. See the example code below. When the right button is touched an empty UIViewController is pushed on the UINavigationController and touching the infobutton lets log the longitude and latitude from that position.

- (void)mapView:(MKMapView *)mapView 
 annotationView:(MKAnnotationView *)view calloutAccessoryControlTapped:(UIControl *)control {
 
    if ([(UIButton*)control buttonType] == UIButtonTypeDetailDisclosure){
        // Do your thing when the detailDisclosureButton is touched
        UIViewController *mapDetailViewController = [[UIViewController alloc] init];
        [[self navigationController] pushViewController:mapDetailViewController animated:YES];
 
    } else if([(UIButton*)control buttonType] == UIButtonTypeInfoDark) {
        // Do your thing when the infoDarkButton is touched
 
        NSLog(@"infoDarkButton for longitude: %f and latitude: %f", 
              [(PlaceMark*)[view annotation] coordinate].longitude, 
              [(PlaceMark*)[view annotation] coordinate].latitude);
    }
}

You're ready to run this project! See you're own buttons in your annotation to do anything you want. If you want the rightCalloutAccessoryView or the leftCalloutAccessoryView you can do it!