How To add custom View in map’s Annotation’s Callout’s

I had same problem and ended up doing following thing:

When I receive mapView delegate callback

-(void)mapView:(MKMapView *)mapView didSelectAnnotationView:(MKAnnotationView *)view

(it’s time when I want to show my custom CalloutView)

I use view received as parameter *(MKAnnotationView )view (which is a pin view) and simply add my custom view to that pin view using

 [view addSubview:customView];

It will add your custom view on top of that pin view so if we want it to be above pin we have to change custom view center property like this:

CGRect customViewRect = customView.frame;
        CGRect rect = CGRectMake(-customViewRect.size.width/2, -customViewRect.size.height-7, customViewRect.size.width, customViewRect.size.height);
        customView.frame = rect;
[view addSubview:customView];

In my case it looks like this

!NOTE:

There is one caveat which however can be easily fixed, your custom view will ignore touch events, because of mapView working with touches differently. Here’s a quick fix:

1) Subclass MKAnnotationView (or MKPinAnnotationView depends on what you need)

2) in your mapView delegate

- (MKAnnotationView *)mapView:(MKMapView *)mapView viewForAnnotation:(id <MKAnnotation>)annotation

use your subclass instead of MKAnnotationView/MKPinAnnotationView

3) in your subclass .m file override two methods as following:

- (UIView*)hitTest:(CGPoint)point withEvent:(UIEvent*)event
{
    UIView* hitView = [super hitTest:point withEvent:event];
    if (hitView != nil)
    {
        [self.superview bringSubviewToFront:self];
    }
    return hitView;
}

- (BOOL)pointInside:(CGPoint)point withEvent:(UIEvent*)event
{
    CGRect rect = self.bounds;
    BOOL isInside = CGRectContainsPoint(rect, point);
    if(!isInside)
    {
        for (UIView *view in self.subviews)
        {
            isInside = CGRectContainsPoint(view.frame, point);
            if(isInside)
                break;
        }
    }
    return isInside;
}

All done!