Basic marker customization

Select platform: Android iOS JavaScript

3D image of New York City featuring the Empire State Building with three custom digital markers floating above it, including a cartoon gorilla labeled

You can customize the appearance of markers using the pinConfiguration constructor. The pinConfiguration constructor provides methods for changing the background and border colors, glyph text and color, altitude , image to be used, and more options for additional customization.

The following code sample shows how to create a new marker and style it using some of the available customization options:

map.addMarker(
 markerOptions {
   position = sanFrancisco
   style = pinConfiguration {
     backgroundColor = Color.GREEN
     borderColor = Color.GREEN
     glyph = Glyph.fromColor(Color.RED)
   }
 }
)

This page shows you how to customize markers in the following ways:

Scale the marker

To scale a marker, use the scale option:

map.addMarker(
 markerOptions {
   position = sanFrancisco
   style = pinConfiguration {
     scale = 3.14
   }
 }
)

Change the background color

Use the PinElement.background option to change the background color of a marker during construction:

map.addMarker(
 markerOptions {
   position = sanFrancisco
   style = pinConfiguration {
     backgroundColor = Color.GREEN
   }
 }
)

Change the border color

Use the markerOptions.borderColor option to change the border color of a marker during contstruction:

map.addMarker(
 markerOptions {
   position = sanFrancisco
   style = pinConfiguration {
     borderColor = Color.GREEN
   }
 }
)

Add text to a glyph

Use the markerOptions.glyph method to replace the default glyph with a text character. The text glyph of the marker scales with the marker:

map.addMarker(
 markerOptions {
   position = sanFrancisco
   style = pinConfiguration {
     glyph = Glyph.fromText("G")
   }
 }
)

Use an image as a marker

Map.addMarker(markerOptions {
  position = latLngAltitude {
      latitude = 40.7484
      longitude = -73.9857
      altitude = 100.0
  }
  zIndex = 1
  label = "Empire State Building"
  isExtruded = true
  isDrawnWhenOccluded = true
  altitudeMode = AltitudeMode.RELATIVE_TO_MESH
  setStyle(ImageView(R.drawable.ook))
})

Remove markers

Use Marker.remove() to remove markers from the map:

marker.remove();