title: iOS MapKit custom callout with image and text on top of a pin programmatically using swift
body: <p>I am trying to show a custom call out on top of pin in the map. It is required that I show an image with some text on top of pin as my call out. The code I wrote produces the following output.</p>
  
  <p><a href="https://i.stack.imgur.com/M4Fxn.png" rel="noreferrer"><img src="https://i.stack.imgur.com/M4Fxn.png" alt="enter image description here"></a></p>
  
  <p>However, my desired output looks like this:</p>
  
  <p><a href="https://i.stack.imgur.com/MbtTx.jpg" rel="noreferrer"><img src="https://i.stack.imgur.com/MbtTx.jpg" alt="enter image description here"></a></p>
  
  <p>How can I achieve my desired output ? Please note that the bubble is an image asset which has to be used, I know how to draw a bubble using CAShapeLayer but that does not accomplish what I want. Here is the code so far.</p>
  
  <pre><code>// methods for Custom annotations
  
      func mapView(_ mapView: MKMapView, viewFor annotation: MKAnnotation) -&gt; MKAnnotationView? {
  
          let annotationView = MKAnnotationView(annotation: pin, reuseIdentifier: "UserLocation")
          annotationView.image = UIImage(named: "marker")
          annotationView.canShowCallout = true
          configureDetailView(annotationView: annotationView)
  
          return annotationView
  
      }
  
  
      func configureDetailView(annotationView: MKAnnotationView) {
          let width = 300
          let height = 200
  
          let calloutView = UIView()
          calloutView.translatesAutoresizingMaskIntoConstraints = false
  
          let views = ["calloutView": calloutView]
  
          calloutView.addConstraints(NSLayoutConstraint.constraints(withVisualFormat: "H:[calloutView(300)]", options: [], metrics: nil, views: views))
          calloutView.addConstraints(NSLayoutConstraint.constraints(withVisualFormat: "V:[calloutView(200)]", options: [], metrics: nil, views: views))
  
  
          let imageView = UIImageView(frame: CGRect(x: 0, y: 0, width: width, height: height))
          imageView.image = UIImage(named: "address_back")
  
          calloutView.addSubview(imageView)
  
          annotationView.detailCalloutAccessoryView = calloutView
      }
  </code></pre>
  
  <p>Please note: I have already seen this post : <a href="http://stackoverflow.com/a/30824051/1271826.">Customize MKAnnotation Callout View?</a> but it does not accomplish what I want as it draws the bubble instead of using my bubble image. The following repository will give you sample project to work with (draws the shape on the map instead of using image, when you run the project on the bottom right corner you see "Drop pin" tap on that then tap on the pin to see the drawn bubble).</p>
  
  <p>Ready skeleton to use:
  <a href="https://github.com/robertmryan/CustomMapViewAnnotationCalloutSwift" rel="noreferrer">https://github.com/robertmryan/CustomMapViewAnnotationCalloutSwift</a></p>