Add marker animation demo

[ToshiakiMasumori]

Adding marker animation demo based on circle demo.
Also, fixing bounce animation bugs.

[wf9a5m75]

Thank you for your PR, it's really helpful!
One thought: if the example were a bit more meaningful, it would help developers better understand how the bounce animation works.

For example, you could place some markers on the map and display a list of them. Then, when a list item is tapped, the corresponding marker could bounce.

It would be great if you could create a more illustrative example like this. Thanks for your cooperation!

[ToshiakiMasumori]

Thank you for your PR, it's really helpful! One thought: if the example were a bit more meaningful, it would help developers better understand how the bounce animation works.

For example, you could place some markers on the map and display a list of them. Then, when a list item is tapped, the corresponding marker could bounce.

It would be great if you could create a more illustrative example like this. Thanks for your cooperation!

Thank you for comment. I believe that's great idea.
Just implemented the message card which shows animation list and then, if clicked it, the marker will act the animation.
Now, we just want to show demo for bounce animation. But also it became we will be able to add new ones easily.
Could you take a look again ?

[ToshiakiMasumori]

demo
https://github.com/user-attachments/assets/b7932bee-468b-4877-a926-980d0349e8f2

[wf9a5m75]

Thanks a lot for the bug fix and the demo work - really appreciated!

I might have been unclear earlier, so let me restate the exact behavior we need for this demo:

Place multiple markers (e.g., cities or sightseeing spots, etc) on the maps, show a list of their names, and when a list item is tapped, the corresponding marker bounces. (As mentioned earlier)

---

Acceptance criteria (minimal)

1. At least 3 markers (mock data is fine) with distinct names shown in a scrollable list.
2. Tapping a list item triggers Bounce on the corresponding marker only.
3. UI remains minimal: list on the bottom/side + map (no animation picker, no settings).

---

Current state

• The current implementation has a single marker and an "Animation list" with only a Bounce button.
• This structure is close, but for this PR we need the list to represent markers (names), not animation types.

---

Suggested approach

• Define a `Spot(id, name, GeoPoint) list (3-5 items).
• Render all markers from this list on the map.
• On list item click: find that marker and set MarkerAnimation.Bounce.

---

Thanks again for the quick iteration!

P.S. I know you're still new to Jetpack Compose, but given your strong coding skills, I'm confident you can pull this off smoothly. 💪

Snippet:

// 1) Spot data
data class Spot(val id: String, val name: String, val point: GeoPoint)

val spots = listOf(
    Spot("s1", "Honolulu", GeoPoint.fromLatLong(21.3069, -157.8583)),
    Spot("s2", "Waikiki Beach", GeoPoint.fromLatLong(21.2766, -157.8289)),
    Spot("s3", "Pearl Harbor", GeoPoint.fromLatLong(21.3649, -157.9491)),
)

// 2) ViewModel example
class AnimationPageViewModelImpl : ViewModel(), AnimationPageViewModel {

    ... // Omitting other implementations

    private val markers: Map<String, MarkerState> = spots.associate { spot ->
        spot.id to MarkerState(
            id = "marker_${spot.id}",
            position = spot.point,
            icon = DefaultIcon(label = spot.name.first().uppercase()),
            animation = null
        )
    }
    fun onSpotTapped(spotId: String) {
        markers[spotId]?.let { m ->
            m.animation = MarkerAnimation.Bounce
        }
    }
    val allMarkers: Collection<MarkerState> get() = markers.values
}

// 3) Map （Place multiple markers）
@Composable
fun AnimationMapComponent(..., viewModel: AnimationPageViewModelImpl) {
    MapViewContainer(...) {
        viewModel.allMarkers.forEach { marker ->
            key(marker.id) { Marker(marker) }
        }
    }
}

// 4) UI （"Animation list"→"Spot list"）
@Composable
fun SpotList(viewModel: AnimationPageViewModelImpl, paddingValues: PaddingValues) {
    MessageCard(
        modifier = Modifier
            .align(Alignment.BottomStart)
            .padding(bottom = paddingValues.calculateBottomPadding() + 16.dp),
        title = "Spots"
    ) {
        LazyColumn(verticalArrangement = Arrangement.spacedBy(8.dp)) {
            items(spots) { spot ->
                Button(
                    modifier = Modifier.fillMaxWidth(),
                    onClick = { viewModel.onSpotTapped(spot.id) }
                ) { Text(spot.name) }
            }
        }
    }
}

[ToshiakiMasumori]

@wf9a5m75 Sorry for my late. I have just fixed them. PTAL.

[wf9a5m75]

Thank you for fixing the marker animation problem. We really appreciate your help.
One thing, changing the AGP version affects other developers, especially downgrading.
I know we set version 8.9 for your environment, because version 8.10 did not work on your environment for some reasons, but please exclude the local modification for next time :)