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 muestra el Empire State Building con tres marcadores digitales personalizados que flotan 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 del fondo y del 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 el siguiente ejemplo 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, se muestra cómo personalizar los marcadores de las siguientes maneras:

Cómo aumentar la escala del marcador

Para escalar 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();