素肌にサスペンダー

個人的な備忘と日記

【Google Maps API】Webサイトに埋め込んだ地図をモノクロにしてsvgのオリジナルマーカーを適用する方法

JavaScript

Webサイトに埋め込んだGoogleMapをデフォルトのデザインじゃなくて、そのサイト用にカスタマイズしたい場合がある。

Google Maps APIを使ってできるけど、オプションやらたくさんあって出来ることが多い。

developers.google.com

今回は、以下の簡単なカスタマイズを行う方法をメモしておく。

要件

  • モノクロ（グレースケール）
  • svg画像でマーカーを設定する。

前提

サンプル

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no"> </head>
<body>
  <script src="https://maps.googleapis.com/maps/api/js?key={APIkeyが入ります}"></script>
  <script type="text/javascript">
    function googleMap() {
      // 座標（下記は東京タワーの位置）
      const latlng = new google.maps.LatLng(35.6591269646591, 139.74632274913765);

      // #mapにGoogle Map設置
      const map = new google.maps.Map(document.getElementById('map'),
        {
          zoom: 16,
          center: latlng,
          styles: [
            {
              featureType: 'all',
              elementType: 'all',
              stylers: [
                { saturation: -100 } // モノクロにする
              ]
            }
          ]
        }
      )

      // icon画像
      const iconImage = {
        url: '/icon.svg',
        scaledSize: new google.maps.Size(80, 80), // アイコンサイズ
      }

      // マーカー設置
      new google.maps.Marker({
        map,
        position: latlng,
        icon: iconImage,
      })

    };
    google.maps.event.addDomListener(window, 'load', function () {
      googleMap();
    });
  </script>

  <!-- ここに地図が埋め込まれます -->
  <div id="map" style="width:100%; height:600px;"></div>

</body>
</html>

Google Maps APIは従量課金だし、APIKEYの発行やら面倒で使いたくない場合は、モノクロにするだけなら無料で出来たので、以下の記事参照。

bnsgt.hatenablog.com