---
title: MarkerAnnotation
framework: mapkitjs
role: symbol
role_heading: Class
path: mapkitjs/markerannotation
---

# MarkerAnnotation

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

## Declaration

```data
class MarkerAnnotation extends Annotation
```

## Mentioned in

MapKit JS 5 MapKit JS 6 Migrating from Version 5 to Version 6

## Overview

Overview A marker is a balloon-shaped annotation that contains a glyph or text. On the map, the marker appears when its coordinate is in view. The following example shows a customized marker that specifies a color for the balloon background and the glyph, and provides custom glyph images. Color properties accept either a color name, here “brown” and “green”, or the equivalent hexadecimal color value such as “#A52A2A” and “#008000”, respectively. Or, you can use a specific color that matches your app’s specific design. For more information on standardized colors, see the CSS working group’s list of common color names and values. const portland = new mapkit.Coordinate(45.514956, -122.679187);  // Portland City Hall, Portland, OR const customMarker = new MarkerAnnotation(portland, {     color: "green",     glyphColor: "brown",     glyphImage: { 1: "glyphImage.png" },     selectedGlyphImage: { 1: "detailedIcon.png", 2: "detailedIcon_2x.png", 3: "detailedIcon_3x.png" } }); The following example shows a marker annotation with a custom callout implemented by the callout delegate. In this example, the annotation is a dot when selected because selectedGlyphImage isn’t used. const calloutDelegate = {     calloutRightAccessoryForAnnotation: function() {         const accessoryViewRight = document.createElement("a");         accessoryViewRight.className = "right-accessory-view";         accessoryViewRight.href = "https://www.nps.gov/stli/index.htm";         accessoryViewRight.target = "_blank";         accessoryViewRight.appendChild(document.createTextNode("ⓘ"));

return accessoryViewRight;     } };

const annotation = new mapkit.MarkerAnnotation(new mapkit.Coordinate(40.6892, -74.0445), {     title: "Title",     subtitle: "Subtitle",     callout: calloutDelegate });

## Topics

### Creating a marker annotation

- [new MarkerAnnotation(location, options)](mapkitjs/markerannotation/markerannotationconstructor.md)
- [MarkerAnnotationConstructorOptions](mapkitjs/markerannotationconstructoroptions.md)

### Setting visibility

- [subtitleVisibility](mapkitjs/markerannotation/subtitlevisibility.md)
- [titleVisibility](mapkitjs/markerannotation/titlevisibility.md)

### Setting appearance

- [color](mapkitjs/markerannotation/color.md)
- [glyphColor](mapkitjs/markerannotation/glyphcolor.md)

### Setting the glyph image and text

- [glyphText](mapkitjs/markerannotation/glyphtext.md)
- [glyphImage](mapkitjs/markerannotation/glyphimage.md)
- [selectedGlyphImage](mapkitjs/markerannotation/selectedglyphimage.md)

### Instance Properties

- [size](mapkitjs/markerannotation/size.md)

## Relationships

### Inherits From

- [Annotation](mapkitjs/annotation.md)

### Inherited By

- [ClusterAnnotation](mapkitjs/clusterannotation.md)
- [PlaceAnnotation](mapkitjs/placeannotation.md)

## See Also

### Annotations

- [Clustering annotations](mapkitjs/clustering-annotations.md)
- [Annotation](mapkitjs/annotation.md)
- [ImageAnnotation](mapkitjs/imageannotation.md)
- [PlaceAnnotation](mapkitjs/placeannotation.md)
- [MapFeatureAnnotation](mapkitjs/mapfeatureannotation.md)
- [UserLocationAnnotation](mapkitjs/userlocationannotation.md)