Cómo crear un marcador avanzado

Selecciona la plataforma: Android iOS JavaScript

Para agregar marcadores avanzados a un mapa, crea una nueva instancia de AdvancedMarkerOptions y, luego, utiliza GoogleMap.addMarker() para agregarlos:

Kotlin

private val SYDNEY = LatLng(-33.87365, 151.20689)

val marker: Marker? = map.addMarker(
    AdvancedMarkerOptions()
        .position(SYDNEY)
        .iconView(textView)
        .zIndex(zIndex)
)

Java

private final LatLng SYDNEY = new LatLng(-33.87365, 151.20689);

Marker marker = map.addMarker(
    new AdvancedMarkerOptions()
        .position(SYDNEY)
        .iconView(textView)
        .zIndex(zIndex));

GoogleMap.addMarker() devuelve una instancia de Marker. Si es necesario, puedes convertir el valor mostrado a AdvancedMarker.

Utiliza AdvancedMarkerOptions para configurar marcadores avanzados. AdvancedMarkerOptions es una subclase de MarkerOptions, de modo que admite los mismos parámetros de configuración que MarkerOptions.

AdvancedMarkerOptions también te permite hacer lo siguiente:

• Crear una instancia de la clase PinConfig y, luego, utilizar la instancia PinConfig para configurar la instancia AdvancedMarkerOptions.

  Utilizar PinConfig para personalizar las propiedades de los marcadores avanzados, como el color de fondo, el color del borde y el glifo

• Crear una instancia de la clase View de Android y usarla para configurar la instancia AdvancedMarkerOptions

  La instancia View te permite personalizar completamente el marcador.

Usa PinConfig

La clase PinConfig contiene opciones que te permiten personalizar los marcadores avanzados. Utiliza PinConfig para lo siguiente:

• Cómo cambiar el color de fondo
• Cómo cambiar el color del borde
• Cambiar el color del glifo o agregar texto
• Cómo ocultar el glifo

Imagen 1: Partes de un marcador avanzado

Usa PinConfig.Builder para crear una instancia de PinConfig:

Kotlin

// Use PinConfig.Builder to create an instance of PinConfig.
val pinConfigBuilder: PinConfig.Builder = PinConfig.builder()
pinConfigBuilder.setBackgroundColor(Color.MAGENTA)
val pinConfig: PinConfig = pinConfigBuilder.build()


// Use the  PinConfig instance to set the icon for AdvancedMarkerOptions.
val advancedMarkerOptions: AdvancedMarkerOptions = AdvancedMarkerOptions()
    .icon(BitmapDescriptorFactory.fromPinConfig(pinConfig))
    .position(MARKER_POSITION)

// Pass the AdvancedMarkerOptions instance to addMarker().
val marker: Marker? = map.addMarker(advancedMarkerOptions)

Java

// Use PinConfig.Builder to create an instance of PinConfig.
PinConfig.Builder pinConfigBuilder = PinConfig.builder();
pinConfigBuilder.setBackgroundColor(Color.MAGENTA);
PinConfig pinConfig = pinConfigBuilder.build();

// Use the  PinConfig instance to set the icon for AdvancedMarkerOptions.
AdvancedMarkerOptions advancedMarkerOptions =
    new AdvancedMarkerOptions()
        .icon(BitmapDescriptorFactory.fromPinConfig(pinConfig))
        .position(MARKER_POSITION);

// Pass the AdvancedMarkerOptions instance to addMarker().
Marker marker = map.addMarker(advancedMarkerOptions);

Cómo cambiar el color de fondo

Usa el método PinConfig.background() para cambiar el color de fondo de un marcador:

Kotlin

// Use PinConfig.Builder to create an instance of PinConfig.
val pinConfigBuilder: PinConfig.Builder = PinConfig.builder()
pinConfigBuilder.setBackgroundColor(Color.MAGENTA)
val pinConfig: PinConfig = pinConfigBuilder.build()

Java

// Use PinConfig.Builder to create an instance of PinConfig.
PinConfig.Builder pinConfigBuilder = PinConfig.builder();
pinConfigBuilder.setBackgroundColor(Color.MAGENTA);
PinConfig pinConfig = pinConfigBuilder.build();

Cómo cambiar el color del borde

Usa el método PinConfig.borderColor() para cambiar el color del borde de un marcador:

Kotlin

// Set the border color.
val pinConfigBuilder: PinConfig.Builder = PinConfig.builder()
pinConfigBuilder.setBorderColor(Color.BLUE)
val pinConfig: PinConfig = pinConfigBuilder.build()

Java

// Set the border color.
PinConfig.Builder pinConfigBuilder = PinConfig.builder();
pinConfigBuilder.setBorderColor(Color.BLUE);
PinConfig pinConfig = pinConfigBuilder.build();

Cómo cambiar el glifo

Crea una instancia Glyph y, luego, úsala para configurar PinConfig. Utiliza el glifo para establecer el texto del glifo y el color del texto, así como el color del glifo, o bien para especificar una imagen personalizada que desees utilizar como glifo.

En el siguiente ejemplo, se establece el texto del glifo:

Kotlin

// Set the glyph text.
val pinConfigBuilder: PinConfig.Builder = PinConfig.builder()
val glyphText = Glyph("A")

// Alteratively, you can set the text color:
// Glyph glyphText = new Glyph("A", Color.GREEN);

pinConfigBuilder.setGlyph(glyphText)
val pinConfig: PinConfig = pinConfigBuilder.build()

Java

// Set the glyph text.
PinConfig.Builder pinConfigBuilder = PinConfig.builder();
PinConfig.Glyph glyphText = new PinConfig.Glyph("A");

// Alternatively, you can set the text color:
// PinConfig.Glyph glyphText = new PinConfig.Glyph("A", Color.GREEN);

pinConfigBuilder.setGlyph(glyphText);
PinConfig pinConfig = pinConfigBuilder.build();

Establece el color del glifo:

Kotlin

val glyphColor = PinConfig.Glyph(Color.BLUE)
pinConfigBuilder.setGlyph(glyphColor)
val pinConfig: PinConfig = pinConfigBuilder.build()

Java

PinConfig.Glyph glyphColor = new PinConfig.Glyph(Color.BLUE);
pinConfigBuilder.setGlyph(glyphColor);
PinConfig pinConfig = pinConfigBuilder.build();

Establece una imagen personalizada para el glifo. Esta técnica es útil si deseas usar un logotipo personalizado o cualquier otro indicador visual en el marcador.

Kotlin

// Set the glyph image.
val glyphImage: Int = R.drawable.example_image
val descriptor = PinConfig.BitmapDescriptorFactory.fromResource(glyphImage)
pinConfigBuilder.setGlyph(Glyph(descriptor))
val pinConfig: PinConfig = pinConfigBuilder.build()

Java

// Set the glyph image.
int glyphImage = R.drawable.example_image;
BitmapDescriptor descriptor = BitmapDescriptorFactory.fromResource(glyphImage);
pinConfigBuilder.setGlyph(new PinConfig.Glyph(descriptor));
PinConfig pinConfig = pinConfigBuilder.build();

Cómo ocultar el glifo

Puedes ocultar el glifo para que el color de fondo rellene completamente el marcador:

Kotlin

// Create a transparent glyph.
val pinConfigBuilder: PinConfig.Builder = PinConfig.builder()
pinConfigBuilder.setBackgroundColor(Color.MAGENTA)
pinConfigBuilder.setGlyph(PinConfig.Glyph(Color.TRANSPARENT))
val pinConfig: PinConfig = pinConfigBuilder.build()

Java

// Create a transparent glyph.
PinConfig.Builder pinConfigBuilder = PinConfig.builder();
pinConfigBuilder.setBackgroundColor(Color.MAGENTA);
pinConfigBuilder.setGlyph(new PinConfig.Glyph(Color.TRANSPARENT));
PinConfig pinConfig = pinConfigBuilder.build();

Usa iconView

El método AdvancedMarkerOptions.iconView() te permite usar cualquier marcador View de Android. Si usas un marcador de vista, podrás controlar completamente el marcador.

Nota: Cuando uses un marcador View, no operes en View para moverlo. En cambio, modifica el Marker directamente. Por ejemplo, para rotar el marcador View, usa el método Marker.setRotation(). No rotes el marcador View.

En tu app, primero crea la vista y, luego, usa el método AdvancedMarkerOptions.iconView() para agregarla a los marcadores avanzados.

Kotlin

// Create a TextView to use as the marker.
val textView = TextView(this)
textView.text = "Hello!!"
textView.setBackgroundColor(Color.BLACK)
textView.setTextColor(Color.YELLOW)

val marker: Marker? = map.addMarker(
    AdvancedMarkerOptions()
        .position(SYDNEY)
        .iconView(textView)
)

Java

// Create a TextView to use as the marker.
TextView textView = new TextView(this);
textView.setText("Hello!!");
textView.setBackgroundColor(Color.BLACK);
textView.setTextColor(Color.YELLOW);

Marker marker = map.addMarker(
    new AdvancedMarkerOptions()
        .position(SYDNEY)
        .iconView(textView));

Precaución: El rendimiento de una vista de mapa con marcadores iconView puede no coincidir con el rendimiento de los marcadores predeterminados o de mapa de bits.

Próximos pasos:

• Comportamiento de colisión