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
- Change the background color
- Change the border color
- Add text to a glyph
- Use an image as a marker
- Remove markers
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
();
