Class

mapkit.MarkerAnnotation

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

Declaration

interface mapkit.MarkerAnnotation

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.

var portland = new mapkit.Coordinate(45.5231, -122.6765);
var 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 it is selected because selectedGlyphImage is not used.

var calloutDelegate = {
    calloutRightAccessoryForAnnotation: function() {
        var 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;
    }
};

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

Topics

Creating a Marker Annotation

mapkit.MarkerAnnotation

Creates a marker annotation at the coordinate location with provided options.

MarkerAnnotationConstructorOptions

An object containing the options that initialize a marker annotation.

Setting Visibility

subtitleVisibility

A value that determines the behavior of the subtitle's visibility.

titleVisibility

A value that determines the behavior of the title's visibility.

mapkit.FeatureVisibility

Constants indicating the visibility of different adaptive map features.

Setting Appearance

color

The background color of the balloon.

glyphColor

The fill color of the glyph.

Setting the Glyph Image and Text

glyphText

The text to display in the marker balloon.

glyphImage

The image to display in the marker balloon.

selectedGlyphImage

The image to display in the balloon when the marker is selected.

Relationships

Inherits From