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マップのアイコンをオリジナルの画像に変更する方法をご案内しました。

著者のイメージ画像

BringFlower|稲田 高洋

2003年から大手総合電機メーカーでUXデザインプロセスの研究、実践。UXデザイン専門家の育成プログラム開発。SEOにおいても重要なW3Cが定めるWeb標準仕様策定にウェブアクセシビリティの専門家として関わる。2010~2018年に人間中心設計専門家を保有。その後、不動産会社向けにSaaSを提供する企業の事業開発部で複数サービスを企画、ローンチ。CMSを提供し1000以上のサイトを分析。顧客サポート、サイト運営にも関わる。2022年3月にBringFlowerを開業し、SEOコンサル、デザイン、ウェブ制作を一手に受ける。グッドデザイン賞4件、ドイツユニバーサルデザイン賞2件、米国IDEA賞1件の受賞歴あり。