Pop-ups

Sélectionnez une plate-forme : Android iOS JavaScript

Un popover affiche du contenu (généralement du texte ou des images) dans une fenêtre d'info-bulle au-dessus de la carte, à un emplacement donné. Le popover se compose d'une zone de contenu et d'un pied effilé. L'extrémité du pied est reliée à un point géographique spécifié sur la carte.

En général, vous associez un popover à un repère, mais vous pouvez également l'associer à une coordonnée LatLng spécifique.

Ajouter un popover

Pour ajouter un popover, créez un objet Popover et définissez ses options, y compris la position et le mode d'altitude. La position est un objet LatLng qui inclut la latitude, la longitude et l'altitude, qui déterminent l'emplacement d'affichage du popover. Si l'ancrage est effectué sur un repère, la position du repère est utilisée à la place. Vous pouvez également contrôler la façon dont l'altitude est interprétée en définissant le mode d'altitude.

Le contenu d'un popover doit être contenu dans une AndroidView. Les popovers sont défilables par défaut et ont une hauteur maximale prédéfinie.

Important : Pour une expérience utilisateur optimale, un seul popover à la fois doit être ouvert sur la carte. En ouvrir plusieurs à la fois surchargera la carte.

Ancrer un popover à un repère

Vous pouvez ancrer des popovers à des repères. Lorsque vous ajoutez un popover ancré à un repère, vous devez l'associer à un objet 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()
    }
}

Ajouter un popover configuré

L'exemple suivant ajoute un popover qui se ferme automatiquement lorsque l'utilisateur appuie en dehors de celui-ci, et qui ne se déplace pas automatiquement vers les popovers nouvellement ouverts :

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