Notificaciones emergentes

Selecciona la plataforma: Android iOS JavaScript

Imagen de un marcador con una ventana de texto emergente adjunta al marcador sobre el puente Golden Gate con una descripción genérica del puente

Un cuadro emergente muestra contenido (por lo general, texto o imágenes) en una ventana de burbuja de información encima del mapa, en una ubicación determinada. La ventana emergente tiene un área de contenido y un tallo cónico. La punta del tallo se conecta a una ubicación específica en el mapa.

Por lo general, las ventanas emergentes se adjuntan a un marcador, pero también es posible vincularlas a coordenadas de LatLng específicas.

Agrega una ventana emergente

Para agregar un cuadro emergente, crea un objeto Popover y establece sus opciones, incluidas la posición y el modo de altitud. La posición es un objeto LatLng que incluye la latitud, la longitud y la altitud, que determinan dónde se muestra el cuadro emergente. Si se fija a un marcador, se usa la posición de este. También puedes controlar cómo se interpreta la altitud configurando el modo de altitud.

El contenido de un cuadro emergente debe estar dentro de un AndroidView. Los popovers se pueden desplazar de forma predeterminada y tienen una altura máxima predefinida.

Cómo fijar un cuadro emergente a un marcador

Puedes fijar ventanas emergentes a los marcadores. Cuando agregues un cuadro emergente fijado a un marcador, deberás asociarlo con un objeto Marker.

class MapManager(private val map: MapView) {

    /**
     * Adds a popover anchored to a marker.
     * @param context The Context required to instantiate UI views.
     */
    fun addPopoverToMarker(context: Context) {
        // 1. Create a marker
        val markerOptions = markerOptions {
            position = latLngAltitude {
                latitude = 37.422
                longitude = -122.084
                altitude = 0.0
            }
        }

        val marker = map.addMarker(markerOptions) ?: return

        // 2. Create the custom view using the passed-in context
        val textView = TextView(context).apply {
            text = context.getString(R.string.popover_hello)
            setPadding(16, 16, 16, 16)
            setBackgroundColor(Color.WHITE)
            setTextColor(Color.BLACK)
        }

        // 3. Configure and display the popover
        val options = popoverOptions {
            content = textView
            positionAnchor = marker
            altitudeMode = AltitudeMode.RELATIVE_TO_GROUND
        }

        val popover = map.addPopover(options)
        popover.show()
    }
}

Agrega un cuadro emergente configurado

En el siguiente ejemplo, se agrega un cuadro emergente que se cierra automáticamente cuando el usuario presiona fuera de él y no se desplaza automáticamente a los cuadros emergentes que se abren:

/**
 * Adds a configured popover (auto-close enabled, auto-pan disabled).
 * @param context The Context used to inflate the UI and retrieve string resources.
 */
fun addConfiguredPopover(context: Context) {
    // 1. Initialize the view with the explicit context
    val textView = TextView(context).apply {
        text = context.getString(com.example.snippets.common.R.string.popover_info)
        setPadding(12, 12, 12, 12)
        setBackgroundColor(Color.WHITE)
        setTextColor(Color.BLACK)
    }

    // 2. Configure popover behavior
    val options = popoverOptions {
        content = textView
        // Setting a fixed coordinate anchor
        positionAnchor = latLngAltitude {
            latitude = 0.0
            longitude = 0.0
            altitude = 0.0
        }
        autoCloseEnabled = true // Closes automatically when the map is tapped elsewhere
        autoPanEnabled = false  // Map camera remains stationary when popover appears
    }

    // 3. Add to the map instance
    map.addPopover(options)
}