Google MAP API グレー

<div class="map-wrap">
  <div id="map" class="map"></div>
</div>

<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDLAln06DGOmQr3Wu-qvnxfoIVzlBzBz_k&callback=initMap" async="" defer=""></script>

.map {
    width: 100%;
    height: 600px;
  }

window.initMap = () => {

  let map;

  const area = document.getElementById("map"); // マップを表示させるHTMLの箱
  // マップの中心位置(例:原宿駅)
  const center = {
    lat: 35.6673833,
    lng: 139.7054965
  };

  //👇追記
  const styles = [
    //地図全体の色味をカスタマイズ
    //グレースケールにするために、saturation(彩度)を最低値-100に設定
    {
      stylers: [{
        saturation: -100
      }]
    }
  ];
  //👆追記

  //マップ作成
  map = new google.maps.Map(area, {
    center,
    zoom: 17,
    styles: styles // 👈追記
  });

  //マーカーオプション設定
  const markerOption = {
    position: center, // マーカーを立てる位置を指定
    map: map, // マーカーを立てる地図を指定
    icon: {
      url: 'https://kotowork.com/memo/wp-content/uploads/2023/02/22156847-1.png' // お好みの画像までのパスを指定
    }
  }

  //マーカー作成
  const marker = new google.maps.Marker(markerOption);

}

Google MAP API グレー

関連記事