# Google Maps APIでマップの見た目をカスタマイズする方法

URL: https://webrandum.net/google-maps-api-styles/
公開日: 2020-12-19
更新日: 2020-12-19
カテゴリー: コーディング
タグ: Google Maps API
出典: Webrandum（著者: サイトウ マサカズ）

Google Maps APIを使うと、マップ上に表示させるピンの種類を変えたり、道路や建物・水域のスタイルを変更して見た目をかなり柔軟にカスタマイズできます。

今回はその方法についてまとめておきます。

## 基本となるマップ

Google Maps APIをまだ取得していない場合は、過去に紹介しているので、取得しておいてください。

[![](https://www.google.com/s2/favicons?domain=webrandum.net)Webrandum![](//webrandum.net/mskz/wp-content/uploads/2020/11/eyecatch-7.jpg)Google Maps APIを使ってGoogle Mapsをウェブサイトに表示させる方法https://webrandum.net/google-maps-apiウェブサイトにGoogle Mapsを埋め込んで、自分好みにカスタマイズしたい場合は「Google Maps API」を使う必要があります。今回はこのGoogle Maps APIの取得方法から、ウェブサイト上に表示させるところまでの流れをまとめておきます。Google Maps APIの料金プラン2018年7月16日以前は、無料版と有料版に分かれていて、最低限の機能は無料版で、それ以上のカスタマイズがしたい場合は有料版を使う必要がありました。しかし、2018年7月16日以降はそれが統合され、「Google Maps Platform」という1つのサービスになりました。そして料金形...](https://webrandum.net/google-maps-api)

今回は下記のコードのstylesオプションに、オプション内容を指定してカスタマイズします。

```
<div id="map"></div>

<script async defer src="https://maps.googleapis.com/maps/api/js?key=APIキー&callback=initMap"></script>
<script>
function initMap() {
  let map = new google.maps.Map(document.getElementById('map'), {
    center: {lat: - 35.681382, lng: 139.766083},
    zoom: 8,
    styles: [
      {
        // 今回のstylesオプションを指定する場所
      },
    ],
  });
}
</script>

<style>
 #map {   width: 100%;   height: 420px; }
</style>
```

ちなみに、前回の記事でも紹介しましたが、`center`が表示するマップの緯度・経度、`zoom`がマップの拡大率になります。

## stylesオプションの基本

stylesオプションは、大きく分けて下記の3つを1組の波括弧`{}`で囲んで指定します。

| 項目 | 内容 | 具体例 |
| --- | --- | --- |

| featureType | 反映する地形情報を指定 | 道路・建物・水域を表示するかどうかの設定 |
| --- | --- | --- |

| elementType | 反映する要素を指定 | ラベルやアイコンなどを表示するかどうかの設定 （特定の種類のラベルだけ非表示も可能） |
| --- | --- | --- |

| stylers | 上記2つ以外のスタイルを指定 | 色の変更など、見た目を変更する設定 |
| --- | --- | --- |

オプションを指定するときは、「featureType（どこの）」「elementType（なにを）」を指定して、そのあとに「stylers（どんな見た目にするのか）」で1セットです。

`{}`を増やすことで特定の要素にだけ他とは違うスタイルを反映したりもできます。

```
styles: [
  {
      featureType: 'どこの',
      elementType: 'なにを',
      stylers: [
      // どんな見た目にするのか
    ],
  },
  {
      featureType: 'どこの',
      elementType: 'なにを',
      stylers: [
      // どんな見た目にするのか
    ],
  },
],
```

ちなみに、`featureType`と`elementType`は、省略するとすべての要素が表示（デフォルトのGoogle Mapsと同じ）になります。

### featureTypeで指定できる値

featureTypeでは場所に関しての情報を指定します。

| 値 | 内容 | 備考 |
| --- | --- | --- |

| all | すべて |   |
| --- | --- | --- |

| administrative | 国や都市などの行政が関わる領域 |   |
| --- | --- | --- |

| administrative.country | administrativeの国だけ |   |
| --- | --- | --- |

| administrative.land_parcel | administrativeの区画だけ |   |
| --- | --- | --- |

| administrative.locality | administrativeの地区や市など |   |
| --- | --- | --- |

| administrative.neighborhood | administrativeの周辺地域 |   |
| --- | --- | --- |

| administrative.province | administrativeの州や県 |   |
| --- | --- | --- |

| landscape | 山や砂漠などの風景情報 |   |
| --- | --- | --- |

| landscape.man_made | landscapeの人工建築物 |   |
| --- | --- | --- |

| landscape.natural | landscapeの自然物 |   |
| --- | --- | --- |

| landscape.natural.landcover | landscapeの自然物の中の土地被覆物 |   |
| --- | --- | --- |

| landscape.natural.terrain | landscapeの自然物の中の地形 |   |
| --- | --- | --- |

| poi | 観光施設や学校・講演などのスポット | Points of interestの略 |
| --- | --- | --- |

| poi.attraction | poiの観光名所 |   |
| --- | --- | --- |

| poi.business | poiの企業や店舗情報 |   |
| --- | --- | --- |

| poi.government | poiの政府機関 |   |
| --- | --- | --- |

| poi.medical | poiの病院や警察などの緊急スポット |   |
| --- | --- | --- |

| poi.park | poiの公園 |   |
| --- | --- | --- |

| poi.place_of_worship | poiの教会などの宗教施設 |   |
| --- | --- | --- |

| poi.school | poiの学校 |   |
| --- | --- | --- |

| poi.sports_complex | poiのスポーツ施設 |   |
| --- | --- | --- |

| road | 道路 |   |
| --- | --- | --- |

| road.arterial | roadの幹線道路 |   |
| --- | --- | --- |

| road.highway | roadの公道 |   |
| --- | --- | --- |

| road.highway.controlled_access | roadの公道の中の高速道路など | 有料などで出入りが制限されている道路 |
| --- | --- | --- |

| road.local | roadの地方道 |   |
| --- | --- | --- |

| transit | 公共交通機関（電車の路線や駅） |   |
| --- | --- | --- |

| transit.line | transitの路線 |   |
| --- | --- | --- |

| transit.station | transitの駅 | 空港やバスの停留所なども含む |
| --- | --- | --- |

| transit.station.airport | transitの空港 |   |
| --- | --- | --- |

| transit.station.bus | transitのバスの停留所 |   |
| --- | --- | --- |

| transit.station.rail | transitの鉄道 |   |
| --- | --- | --- |

| water | 水域 |   |
| --- | --- | --- |

### elementTypeで指定できる値

featureTypeでは場所を指定したあとに、elementTypeでその場所にある何を変更するのか指定します。

| 値 | 内容 |
| --- | --- |

| all | すべて |
| --- | --- |

| geometry | 対象の図形や塗りや線 |
| --- | --- |

| geometry.fill | geometryの塗り |
| --- | --- |

| geometry.stroke | geometryの線 |
| --- | --- |

| labels | 建物のラベルやアイコン |
| --- | --- |

| labels.icon | labelsのアイコン |
| --- | --- |

| labels.text | labelsのテキスト |
| --- | --- |

| labels.text.fill | labelsのテキストの塗り |
| --- | --- |

| labels.text.stroke | labelsのテキストの線 |
| --- | --- |

### stylersで指定できる値

最後にstylersで見た目を指定します。

| 値 | 内容 | 指定方法 |
| --- | --- | --- |

| hue | 色の設定 | #付きのカラーコード6桁で指定（3桁の省略などは無効） |
| --- | --- | --- |

| lightness | 明度の設定 | -100〜100の間の数値で指定 |
| --- | --- | --- |

| saturation | 彩度の設定 | -100〜100の間の数値で指定 |
| --- | --- | --- |

| gamma | ガンマ補正の設定 | 0.01〜10.0の間の数値で指定 |
| --- | --- | --- |

| invert_lightness | 明度の反転の設定 | true（明度を反転）、false（反転しない）の真偽値で指定 |
| --- | --- | --- |

| visibility | 表示状態の設定 | “on”（表示）、”off”（非表示）、”simplified”（単純化して表示）の文字列で指定 |
| --- | --- | --- |

| color | 色の設定 | #付きのカラーコード6桁で指定（3桁の省略などは無効） |
| --- | --- | --- |

| weight | 地物の厚み | pxで単位の数値で指定 |
| --- | --- | --- |

これでGoogle Mapsにあるどの要素に対しても色を変えたり、表示・非表示を切り替えたりできます。

見た目はカスタマイズする必要はなくても、サイトによってはvisibilityを使って不要なピンを削除しておけば、Google Mapsはかなり見やすくなります。