【Android】Google Mapsの「赤いピン」のカスタマイズ9種を紹介します（画像付き）

概要

Androidアプリ内でGoogle Mapsを表示するときに、デフォルトのマーカー（例の赤いアレ）ではなく自分で用意した画像をマーカーとして使いたかった。
マーカーの画像を変更する方法と、その他カスタマイズする方法もまとめる。

本記事では東京駅に設置したマーカーをカスタマイズしていく。

override fun onMapReady(map: GoogleMap) {
    val tokyo = LatLng(35.6804, 139.7690)
    map.addMarker(MarkerOptions().position(tokyo))
}

マーカーをカスタマイズする

カスタマイズできる項目を以下に示す。

• Position（Required）
  地図上のマーカーの位置（LatLng）。Markerオブジェクトの必須プロパティ。
• Anchor
  マーカーを表示する時の画像上のポイント。デフォルトは画像下部中央。
• Alpha
  マーカーの不透明度。デフォルトは1.0。
• Title
  マーカーをタップした時に情報ウィンドウに表示される文字列。
• Snippet
  Titleの下に表示される追加の文字列。
• Icon
  デフォルトのマーカー画像の代わりに表示される画像。
• Draggable
  マーカーを移動できるようにしたい場合trueにする。デフォルトはfalse。
• Visible
  マーカーを非表示にする場合falseにする。デフォルトはtrue。
• Flat or Billboard orientation
  デフォルトのマーカーは、カメラに合わせて回転したり傾いたりはしない。フラットなマーカーはカメラに合わせて回転したり傾く。どちらのタイプのマーカーも、ズームによってサイズは変わらない。
• Rotation
  度数（時計回り）で指定されたマーカーの向き。デフォルトは、フラットなマーカーの場合は北揃えである。そうでないマーカーの場合上向きで、常にカメラに向くように回転する。

マーカーのアンカーを変更する

画像のアンカーポイントを、x軸・y軸それぞれ0から1の位置で設定する。
以下のコードでは画像の中央に設定している。

override fun onMapReady(map: GoogleMap) {
    val tokyo = LatLng(35.6804, 139.7690)
    map.addMarker(MarkerOptions()
        .position(tokyo)
        .anchor(0.5f, 0.5f)
    )
}

「東京」の部分にマーカーの中央が来るようになった。

マーカーの不透明度を変更する

マーカーの不透明度を0から1で設定する。
以下のコードでは不透明度50%に設定している。

override fun onMapReady(map: GoogleMap) {
    val tokyo = LatLng(35.6804, 139.7690)
    map.addMarker(MarkerOptions()
        .position(tokyo)
        .alpha(0.5f)
    )
}

マーカーの文字列を設定する

マーカーをタップした時に表示されるタイトル（.title()）・追加の文字列（.snippet()）を設定する。

override fun onMapReady(map: GoogleMap) {
    val tokyo = LatLng(35.6804, 139.7690)
    map.addMarker(MarkerOptions()
        .position(tokyo)
        .title("Tokyo")
        .snippet("東京駅")
    )
}

マーカーの色を変更する

デフォルトのマーカーの色を変更する。
用意されている色はこちら
以下のコードでは青に変更している。

override fun onMapReady(map: GoogleMap) {
    val tokyo = LatLng(35.6804, 139.7690)
    map.addMarker(MarkerOptions()
        .position(tokyo)
        .icon(BitmapDescriptorFactory.defaultMarker(BitmapDescriptorFactory.HUE_BLUE))
    )
}

マーカーの画像を変更する

.icon()では、マーカーの画像自体を変更することもできる。
マーカー画像を以下の画像に変更した。

sample_marker.png（トラックパッドで書いたので線がガッタガタ）

override fun onMapReady(map: GoogleMap) {
    val tokyo = LatLng(35.6804, 139.7690)
    map.addMarker(MarkerOptions()
        .position(tokyo)
        .icon(BitmapDescriptorFactory.fromResource(R.drawable.sample_marker))
    )
}

2x、3xなどの画像を使いたい場合はmipmapの該当サイズのディレクトリに置く。

override fun onMapReady(map: GoogleMap) {
    val tokyo = LatLng(35.6804, 139.7690)
    map.addMarker(MarkerOptions()
        .position(tokyo)
        .icon(BitmapDescriptorFactory.fromResource(R.mipmap.sample_marker))
    )
}

若干鮮明になったように見える……。

fromResource()の他にも、以下の方法で画像を設定できる。

• fromAsset(assetName: String)
  アセットディレクトリ内の画像名
• fromBitmap(image: Bitmap)
Bitmap画像
• fromFile(fileName: String)
  ローカルストレージ内の画像名
• fromPath(absolutePath: String)
  画像ファイルの絶対パス

マーカーを移動できるようにする

マーカーをドラッグできるように設定する。

override fun onMapReady(map: GoogleMap) {
    val tokyo = LatLng(35.6804, 139.7690)
    map.addMarker(MarkerOptions()
        .position(tokyo)
        .draggable(true)
    )
}

マーカーを非表示にする

マーカーが地図に表示されないように設定する。

override fun onMapReady(map: GoogleMap) {
    val tokyo = LatLng(35.6804, 139.7690)
    map.addMarker(MarkerOptions()
        .position(tokyo)
        .visible(false)
    )
}

フラットなマーカーにする

カメラの回転や傾きに追従するようになる。

override fun onMapReady(map: GoogleMap) {
    val tokyo = LatLng(35.6804, 139.7690)
    map.addMarker(MarkerOptions()
        .position(tokyo)
        .flat(true)
    )
}

　
左: デフォルト　右: フラット

マーカーの向きを変更する

マーカーの向きを度数（時計回り）で設定する。
以下のコードでは90°（3時の方向）に設定している。

override fun onMapReady(map: GoogleMap) {
    val tokyo = LatLng(35.6804, 139.7690)
    map.addMarker(MarkerOptions()
        .position(tokyo)
        .rotation(90.0f)
    )
}

参考