how to add custom callout view in mapview

Question

I am new to mapkit in objective-c. I am able to add custom annotation in mapview.

i need to place custom callout view like below image

like this .

But i didn't get how can i design callout view like this.

i know i need to add callout in view for annotation method.

- (MKAnnotationView *)mapView:(MKMapView *)map viewForAnnotation:(id <MKAnnotation>)annotation
{
    static NSString *AnnotationViewID = @"annotationViewID";

    MKAnnotationView *annotationView = (MKAnnotationView *)[mapview dequeueReusableAnnotationViewWithIdentifier:AnnotationViewID];

    if (annotationView == nil)
    {
        annotationView = [[[MKAnnotationView alloc] initWithAnnotation:annotation reuseIdentifier:AnnotationViewID] autorelease];
    }

    annotationView.image = [UIImage imageNamed:@"blue_without_pin.png"];
    annotationView.annotation = annotation;


    return annotationView;
}

http://shawnsbits.com/blog/2011/04/12/custom-map-pins-for-mapkit/..visit here.. — Nitin, May 01 '12 at 07:38
thanks for your replay nit,but link which you posted is not working,it shows no results found — Mahesh Babu, May 01 '12 at 07:43
http://shawnsbits.com/blog/2010/12/23/mapkit-overlays-session-1-overlay-map/ — hanumanDev, May 01 '12 at 07:55
How about these two questions? [MKAnnotationView - Lock custom annotation view to pin on location updates](http://stackoverflow.com/questions/6392931/mkannotationview-lock-custom-annotation-view-to-pin-on-location-updates) & [Customize the MKAnnotationView callout](http://stackoverflow.com/questions/8018841/customize-the-mkannotationview-callout) — rohan-patel, May 01 '12 at 08:16
http://www.jakeri.net/2009/12/custom-callout-bubble-in-mkmapview-final-solution/ this is a link with a working code — sujith1406, May 01 '12 at 08:19
Just ran into a similar problem. After a week of searching, I've settled with SMCallout (available as a Pod). It comes with an example project and is fairly straight forward to use ! https://github.com/nfarina/calloutview — Priest, Nov 26 '14 at 14:45
See https://stackoverflow.com/a/30824051/1271826 and https://stackoverflow.com/a/17772487/1271826. — Rob, Apr 22 '22 at 22:22

score 0 · Answer 1 · answered Jun 05 '12 at 11:37

Basically what you want to do is add a new custom view by implementing the following method in your MKMapViewDelegate instance :

- (void)mapView:(MKMapView *)mapView didSelectAnnotationView:(MKAnnotationView *)view {
    CGPoint annotationCenter = [mapView convertCoordinate:view.annotation.coordinate toPointToView:mapView];
    [self displayCustomCalloutForAnnotation:view.annotation center:annotationCenter];
}

score 0 · Answer 2 · answered Apr 19 '13 at 13:47

@interface CustomAnnotaionView : MKAnnotationView




@property (strong, nonatomic) UIView *calloutView;




-(void)setSelected:(BOOL)selected animated:(BOOL)animated;




@end




@implementation CustomAnnotaionView




@synthesize calloutView = _calloutView;




-(void)setSelected:(BOOL)selected animated:(BOOL)animated





{

    [super setSelected:selected animated:animated];

    if(selected)
    {

        [self.calloutView setFrame:CGRectMake(30, 130, 250, 135)];
        [self.calloutView sizeToFit];
        self.calloutView.backgroundColor = [UIColor colorWithPatternImage:[UIImage imageNamed:@"popup.png"]];
        [self addSubview:self.calloutView];

    }
    else
    {

        [self.calloutView removeFromSuperview];
    }

}

-(void)didAddSubview:(UIView *)subview
{

    if([[[subview class]description]isEqualToString:@"UICalloutView"])
    {

        [subview removeFromSuperview];

    }
}

Use this customAnnotationView class in MapView delegate method,

- (MKAnnotationView *)mapView:(MKMapView *)theMapView viewForAnnotation:(id 

<MKAnnotation>)annotation

{



    if([annotation isKindOfClass:[MapAnnotation class]])
    {
       CustomAnnotationView *annotationView = (CustomAnnotaionView*)[theMapView dequeueReusableAnnotationViewWithIdentifier:@"CustomAnnotationView"];
        if(!annotationView)
        {
         MapAnnotation *annotation = (MapAnnotation *)annotation;

         annotationView = [[CustomAnnotaionView alloc]initWithAnnotation:annotation reuseIdentifier:@"CustomAnnotationView"];

            [annotationView setCanShowCallout:YES];
        }
        else
            annotationView.annotation = annotation;

        return annotationView;

    }
    return nil;

}

score 0 · Answer 3 · answered Nov 13 '15 at 23:56

One solution for this would be to detect the exact coordinate of the annotation selected relative to the parent UIView and then drawing a UIView directly on top of the MKMapView.

Here's a snippet that might help:

- (void)mapView:(MKMapView *)mapView didSelectAnnotationView:(MKAnnotationView *)view
{
    CGPoint pointInMap = [self.mapView convertCoordinate:buildingAnnotation.coordinate
                                           toPointToView:self.view];

    // Hide the default callout generated by MKMapView

    [mapView deselectAnnotation:view.annotation animated:NO];

    // Create a custom callout view and center the arrow on the pointInMap CGPoint
}

If you add it as a subview of the annotation view, it will move automatically as the user pans the map. — Rob, Apr 26 '22 at 01:29

score -3 · Answer 4 · answered Oct 22 '13 at 11:22

-3

You must implement a callout view yourself, and use

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

this delegate to make the callout view showing at right place,

IOS have not any method to custom callout view yet

answered Oct 22 '13 at 11:22

Bryan Wong

1
1

1

How does this differ from @pnollet's answer – mmmmmm Oct 22 '13 at 11:40

how to add custom callout view in mapview

4 Answers4

Linked