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

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

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

基本となるマップ

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

Webrandum

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つのサービスになりました。そして料金形...

今回は下記のコードの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（どんな見た目にするのか）」で1セットです。
{}を増やすことで特定の要素にだけ他とは違うスタイルを反映したりもできます。

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

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

featureTypeで指定できる値

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

elementTypeで指定できる値

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

stylersで指定できる値

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

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

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