[Android] Google Mapsを組み込んで、JSONスタイルで見た目をカスタマイズする方法

Androidアプリで地図を表示するとなると、多くの場合はGoogle Mapsを組み込みますよね。
ただ、デフォルトの見た目のままだと少し味気ない…ということもあると思います。
そこで今回は、Google MapsをAndroidに組み込み、さらにJSONスタイルを使って見た目を自由にカスタマイズする方法を紹介していきます。

準備：Google Maps APIキーの取得
依存関係の追加
レイアウトにMapFragmentを追加
Activityから地図を初期化
地図の見た目をJSONでカスタマイズ
1. スタイルJSONの作成
2. コードからスタイルを適用
まとめ

準備：Google Maps APIキーの取得

まずはGoogle Cloud ConsoleからMaps SDK for Androidを有効化し、APIキーを取得します。
取得したAPIキーは AndroidManifest.xml に設定します。


<meta-data
    android:name="com.google.android.geo.API_KEY"
    android:value="YOUR_API_KEY_HERE"/>

これでプロジェクトからGoogle Mapsを呼び出せるようになります。

依存関係の追加

次に、GradleにMaps用のライブラリを追加します。


implementation 'com.google.android.gms:play-services-maps:18.1.0'

これでMapsのクラスを使えるようになります。

レイアウトにMapFragmentを追加

地図を表示したい画面に SupportMapFragment を配置します。


<fragment
    android:id="@+id/map"
    android:name="com.google.android.gms.maps.SupportMapFragment"
    android:layout_width="match_parent"
    android:layout_height="match_parent"/>

これでUI上に地図の表示領域ができます。

Activityから地図を初期化

続いて、SupportMapFragment から地図を取得して初期化します。


class MapsActivity : AppCompatActivity(), OnMapReadyCallback {

    private lateinit var map: GoogleMap

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_maps)

        val mapFragment = supportFragmentManager
            .findFragmentById(R.id.map) as SupportMapFragment
        mapFragment.getMapAsync(this)
    }

    override fun onMapReady(googleMap: GoogleMap) {
        map = googleMap

        // サンプル：東京駅にピンを立てる
        val tokyo = LatLng(35.681236, 139.767125)
        map.addMarker(MarkerOptions().position(tokyo).title("東京駅"))
        map.moveCamera(CameraUpdateFactory.newLatLngZoom(tokyo, 14f))
    }
}

この時点で、地図が表示され、東京駅にマーカーが表示されるはずです。

地図の見た目をJSONでカスタマイズ

デフォルトのGoogle Mapsは見やすいのですが、アプリのテーマに合わせたいときや特定の情報を強調したいときはスタイルを変更すると便利です。
Maps SDKでは、JSONファイルを使って見た目を変更できます。

スタイルJSONの作成

例えば、夜間モード風にしたい場合は以下のようなJSONを res/raw/map_style.json に保存します。


[
  {
    "elementType": "geometry",
    "stylers": [
      { "color": "#212121" }
    ]
  },
  {
    "elementType": "labels.text.fill",
    "stylers": [
      { "color": "#757575" }
    ]
  },
  {
    "elementType": "labels.text.stroke",
    "stylers": [
      { "color": "#212121" }
    ]
  },
  {
    "featureType": "poi",
    "stylers": [
      { "visibility": "off" }
    ]
  }
]

コードからスタイルを適用

このJSONを読み込んで地図に反映します。


override fun onMapReady(googleMap: GoogleMap) {
    map = googleMap

    // JSONスタイルを適用
    try {
        val success = map.setMapStyle(
            MapStyleOptions.loadRawResourceStyle(this, R.raw.map_style)
        )
        if (!success) {
            Log.e("MapsActivity", "スタイルの適用に失敗しました")
        }
    } catch (e: Resources.NotFoundException) {
        e.printStackTrace()
    }

    val tokyo = LatLng(35.681236, 139.767125)
    map.addMarker(MarkerOptions().position(tokyo).title("東京駅"))
    map.moveCamera(CameraUpdateFactory.newLatLngZoom(tokyo, 14f))
}

これで、夜間モード風のカスタマイズが適用された地図が表示されます。
JSONの内容を変えれば、建物だけ強調したり、水辺を暗めにしたりと自由に調整できます。