Googleマップをグレースケールにする／航空写真ボタンなどを非表示にするなどのカスタマイズ方法

Googleマップをグレースケールにしたり、航空写真などのボタンを非表示にするなどの各種カスタマイズ方法をご紹介します。

事前準備

以下を事前に行う必要があります。事前準備の方法はこちらでご案内していますので、必要な方は参照ください。

• GoogleのAPIを有効にし、APIキーを取得
• APIキーをコードで埋め込んで認証を通す

Googleマップのカスタマイズ

JavaScriptでカスタマイズを行います。

緯度、経度と書いているところはGoogleマップなどで得た数字を入れてください。

ピンのアイコンを変更したい場合は別の記事で紹介していますので、そちらをご参照ください。

function initMap() {
  const latlng = new google.maps.LatLng( 緯度, 経度 );  //中央位置
  const map = new google.maps.Map(document.getElementById('gmap'), {
    zoom: 15, //縮尺
    center: latlng,
    streetViewControl: false, //ストリートビューボタン非表示
    mapTypeControl: false, //
    mapTypeId: google.maps.MapTypeId.ROADMAP
  });

  //グレースケールに
  const mapStyle = [ {
    "stylers": [ {
    "saturation": -100
    } ]
  } ];
  const mapType = new google.maps.StyledMapType(mapStyle);
    map.mapTypes.set( 'GrayScaleMap', mapType);
    map.setMapTypeId( 'GrayScaleMap' );
}

まとめ

Googleマップのアイコンをオリジナルの画像に変更する方法をご案内しました。