Personalización básica de los marcadores

Selecciona la plataforma: Android iOS JavaScript

Imagen en 3D de la ciudad de Nueva York en la que se ve el Empire State Building con tres marcadores digitales personalizados flotando sobre él, incluido un gorila de dibujos animados etiquetado

Puedes personalizar la apariencia de los marcadores con el constructor pinConfiguration. El constructor pinConfiguration proporciona métodos para cambiar los colores de fondo y de borde, el texto y el color del glifo, la altitud, la imagen que se usará y más opciones para una personalización adicional.

En la siguiente muestra de código, se muestra cómo crear un marcador nuevo y darle estilo con algunas de las opciones de personalización disponibles:

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

En esta página, te indicamos cómo aplicar las siguientes personalizaciones:

Cómo cambiar el tamaño del marcador

Para cambiar el tamaño de un marcador, usa la opción scale:

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

Cómo cambiar el color del fondo

Usa la opción PinElement.background para cambiar el color de fondo de un marcador durante la construcción:

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

Cómo cambiar el color del borde

Usa la opción markerOptions.borderColor para cambiar el color del borde de un marcador durante la construcción:

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

Cómo agregar texto a un glifo

Usa el método markerOptions.glyph para reemplazar el glifo predeterminado por un carácter de texto. El glifo de texto del marcador se ajusta con el marcador:

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

Cómo usar una imagen como marcador

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))
})

Cómo quitar marcadores

Usa Marker.remove() para quitar marcadores del mapa:

marker.remove();