0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

アプリのGoogle Mapで複数地点にピンを指す方法

0
Posted at

アプリでGoogle Map上に複数のピンを指す方法をメモします。

GoogleMap.addMarker() を使用して指したいピンの数だけ登録します。

override fun onMapReady(googleMap: GoogleMap) {
    val locations = listOf(
        LatLng(35.681236, 139.767125),
        LatLng(35.658034, 139.701636),
        LatLng(35.710063, 139.8107)
    )

    locations.forEach { latLng ->
        googleMap.addMarker(
            MarkerOptions()
                .position(latLng)  // latLngからピンの位置3つ登録する
                .title("ピン")
        )
    }
    googleMap.moveCamera(
        CameraUpdateFactory.newLatLngZoom(locations[0], 12f)
    )
}

下記2つの方法もメモします。
・ タイトルを地点ごとに変える方法
・ すべてのピンが画面内に収まるようにする法方

// 地点情報をデータクラスで管理する
data class Place(
    val name: String,
    val latLng: LatLng
)

override fun onMapReady(googleMap: GoogleMap) {
    val places = listOf(
        Place("東京駅", LatLng(35.681236, 139.767125)),
        Place("渋谷", LatLng(35.658034, 139.701636)),
        Place("スカイツリー", LatLng(35.710063, 139.8107))
    )

    // `LatLngBounds` を使用してズームレベルを調整する。
    val boundsBuilder = LatLngBounds.Builder()

    places.forEach {
        googleMap.addMarker(
            MarkerOptions()
                .position(it.latLng)
                .title(it.name)
        )
        boundsBuilder.include(it.latLng)
    }

    val bounds = boundsBuilder.build()
    googleMap.animateCamera(
        CameraUpdateFactory.newLatLngBounds(bounds, 100)
    )
}

これですべてのピンが画面内に収まるように表示します。

0
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?