Personalização básica de marcadores

Selecione a plataforma: Android iOS JavaScript

Imagem 3D da cidade de Nova York com o Empire State Building e três marcadores digitais personalizados flutuando acima dele, incluindo um gorila de desenho animado com o rótulo

É possível personalizar a aparência dos marcadores usando o construtor pinConfiguration. O construtor pinConfiguration oferece métodos para mudar as cores do plano de fundo e da borda, o texto e a cor do glifo, a altitude, a imagem a ser usada e mais opções de personalização.

O exemplo de código a seguir mostra como criar um marcador e estilizar usando algumas das opções de personalização disponíveis:

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

Nesta página, mostramos como personalizar marcadores da seguinte forma:

Ajustar a escala do marcador

Para dimensionar um marcador, use a opção scale:

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

Mudar a cor do plano de fundo

Use a opção PinElement.background para mudar a cor de fundo de um marcador durante a construção:

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

Mudar a cor da borda

Use a opção markerOptions.borderColor para mudar a cor da borda de um marcador durante a construção:

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

Adicionar texto a um glifo

Use o método markerOptions.glyph para substituir o glifo padrão por um caractere de texto. O glifo de texto do marcador é dimensionado com ele:

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

Usar uma imagem 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))
})

Remover marcadores

Use Marker.remove() para remover marcadores do mapa:

marker.remove();