MapKit JS allows single-point annotations to be shown on a map. This is done by creating an mapkit.Annotation object and adding it to a map. The framework provides two built-in objects for your convenience, mapkit.MarkerAnnotation, mapkit.ImageAnnotation. mapkit.MarkerAnnotation is the easiest to use, so it will be described first.

It's important to highlight a difference between the way annotations work in MapKit JS and native MapKit. In native MapKit, there are annotation objects and annotation views. You can decide the annotation view that should be used for a particular annotation by implementing mapView:viewForAnnotation in the map's delegate. In MapKit JS, there is only the annotation, which is both model and view. Annotations can still be initialized by supplying any object that has coordinate, title and subtitle properties. The look of annotations can also be customized. The difference is that we opted for a more direct approach of having the developer create annotation views explicitly rather than through a delegate.

A callout is a standard or custom element that can give more information about an annotation. A standard callout displays the annotation’s title and subtitle, if one is provided. A callout appears when an annotation is selected either programmatically or interactively (by clicking or tapping). A callout goes away when the annotation is deselected programmatically or interactively, either by tapping or clicking on the map, or selecting another item on the map.

Annotation Events




The annotation's selected property was set to true.


The annotation's selected property was set to false.


The user has initiated a drag on an annotation. A long press or click without movement is not considered a drag.


The user is dragging an annotation. This event has an extra coordinate property for the coordinate of the annotation at the time when the event occurs. This is different from the annotation’s own coordinate property since that property is not updated until the annotation is dropped.


The user has ended a drag on an annotation.



About Annotation Clustering

Combining multiple annotations into a single clustered annotation.


The base annotation object, used for creating custom annotations.


Methods for customizing the behavior and appearance of an annotation callout.


Constants indicating how to interpret the collision frame rectangle of an annotation view.


Constant values used to provide a hint the map uses to prioritize displaying annotations.

Image Annotations


A customized annotation with image resources that you provide.

Marker Annotations


An annotation that displays a balloon-shaped marker at the designated location.

See Also

Annotations and Overlays