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

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

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

```kotlin
override fun onMapReady(map: GoogleMap) {
    val tokyo = LatLng(35.6804, 139.7690)
    map.addMarker(MarkerOptions().position(tokyo))
}
```
![tokyo_default.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/124752/9a3eb38b-c612-4e9d-cf14-17b96377b85f.png)



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

- 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の位置で設定する。
以下のコードでは画像の中央に設定している。

```kotlin
override fun onMapReady(map: GoogleMap) {
    val tokyo = LatLng(35.6804, 139.7690)
    map.addMarker(MarkerOptions()
        .position(tokyo)
        .anchor(0.5f, 0.5f)
    )
}
```
![tokyo_anchor.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/124752/328c9ee9-526f-60d7-0aaa-a7d219f5ef32.png)
「東京」の部分にマーカーの中央が来るようになった。

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

```kotlin
override fun onMapReady(map: GoogleMap) {
    val tokyo = LatLng(35.6804, 139.7690)
    map.addMarker(MarkerOptions()
        .position(tokyo)
        .alpha(0.5f)
    )
}
```
![tokyo_alpha.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/124752/cf6e377e-c6e5-d5f4-85ae-1132d59276a5.png)


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

```kotlin
override fun onMapReady(map: GoogleMap) {
    val tokyo = LatLng(35.6804, 139.7690)
    map.addMarker(MarkerOptions()
        .position(tokyo)
        .title("Tokyo")
        .snippet("東京駅")
    )
}
```
![tokyo_title_and_snippet.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/124752/bd574255-b094-7736-d0bb-f0db1dc98b82.png)


## マーカーの色を変更する
デフォルトのマーカーの色を変更する。
用意されている色は[こちら](https://developers.google.com/android/reference/com/google/android/gms/maps/model/BitmapDescriptorFactory.html#constant-summary)
以下のコードでは青に変更している。

```kotlin
override fun onMapReady(map: GoogleMap) {
    val tokyo = LatLng(35.6804, 139.7690)
    map.addMarker(MarkerOptions()
        .position(tokyo)
        .icon(BitmapDescriptorFactory.defaultMarker(BitmapDescriptorFactory.HUE_BLUE))
    )
}
```
![tokyo_change_color.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/124752/49a4af1d-595d-987c-7efc-67fff8f48606.png)



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

sample_marker.png<font color="#BBBBBB">（トラックパッドで書いたので線がガッタガタ）</font>
![sample_marker.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/124752/4ed4a508-02b4-feed-0c61-1417c748de6c.png)




```kotlin
override fun onMapReady(map: GoogleMap) {
    val tokyo = LatLng(35.6804, 139.7690)
    map.addMarker(MarkerOptions()
        .position(tokyo)
        .icon(BitmapDescriptorFactory.fromResource(R.drawable.sample_marker))
    )
}
```
![tokyo_change_image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/124752/cc890394-818d-afb1-4690-3919c1147791.png)




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

```kotlin
override fun onMapReady(map: GoogleMap) {
    val tokyo = LatLng(35.6804, 139.7690)
    map.addMarker(MarkerOptions()
        .position(tokyo)
        .icon(BitmapDescriptorFactory.fromResource(R.mipmap.sample_marker))
    )
}
```
![tokyo_change_image_mipmap.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/124752/ef752a0b-d331-1611-4dd9-fb06f8b44122.png)
若干鮮明になったように見える……。

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

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

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

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

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

```kotlin
override fun onMapReady(map: GoogleMap) {
    val tokyo = LatLng(35.6804, 139.7690)
    map.addMarker(MarkerOptions()
        .position(tokyo)
        .visible(false)
    )
}
```
![tokyo_invisible.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/124752/984050cc-de55-8d92-5d8e-4d09592df7b7.png)



## フラットなマーカーにする
カメラの回転や傾きに追従するようになる。

```kotlin
override fun onMapReady(map: GoogleMap) {
    val tokyo = LatLng(35.6804, 139.7690)
    map.addMarker(MarkerOptions()
        .position(tokyo)
        .flat(true)
    )
}
```
![tokyo_flat_false.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/124752/539ff7f7-1964-0e3b-9901-ba4d28a19b7d.png)　![tokyo_flat.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/124752/79fb7004-7657-9718-b36a-aaf4ca320762.png)
左: デフォルト　右: フラット

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

```kotlin
override fun onMapReady(map: GoogleMap) {
    val tokyo = LatLng(35.6804, 139.7690)
    map.addMarker(MarkerOptions()
        .position(tokyo)
        .rotation(90.0f)
    )
}
```
![tokyo_change_rotation.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/124752/1023fae6-f677-13a9-9dda-8e751536bae5.png)


# 参考
https://developers.google.com/maps/documentation/android-sdk/marker