Googleマップを白黒(グレースケール)にしてサイトに埋め込む方法

以前、Google Maps APIを使って、Googleマップにオリジナルのマーカーを表示する方法をご紹介しました。今回は、Googleマップを白黒にする方法をご紹介したいと思います。

Google Maps APIを利用すれば、簡単に地図を白黒に変更することができます。

スポンサードリンク

Googleマップを白黒(グレースケール)に変更してサイトに埋め込む方法

ステップ1. APIキーの取得

まずは、Google Maps APIを利用するために、Google Maps APIでAPIキーを取得します。

APIキーの取得方法につきましては、こちらの記事をご参照ください。

ステップ2. APIの読み込みと地図表示用タグの設置

<head>～</head>内に以下のコードを記述します。

<script src="//maps.google.com/maps/api/js?key=【APIキー】"></script>

【APIキー】には、Google Maps APIで取得したAPIキーを入れてください。

続いて、bodyに「onload=”initialize();”」を追加します。

<body onload="initialize();">

Googleマップを表示したい場所に以下を記述します。

<div id="campus-map"></div>

CSSで横幅と高さを指定します。


#campus-map {
  width: 100%;
  height: 300px;
}

ステップ3. Googleマップを白黒に変更するスクリプトの実行

最後にGoogleマップを白黒に変更するためのスクリプトを記述します。記述場所は、</body>の直前でOKです。


<script>
function initialize() {
  var latlng = new google.maps.LatLng(35.710071, 139.810679);
  var myOptions = {
    zoom: 15,
    center: latlng,
    mapTypeId: google.maps.MapTypeId.ROADMAP
  };
  var map = new google.maps.Map(document.getElementById('campus-map'), myOptions);

  //マーカー
  var marker = new google.maps.Marker({
    position: latlng,
    map: map,
    title: 'スカイツリー'
  });

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

「35.710071, 139.810679」が地図の緯度と経度になりますので、表示したい地図の緯度と経度に変更してください。

上記の通り記述すると、標準のマーカーが表示されますので、マーカーもオリジナルに変更したい場合は、こちらの記事をご参照いただき、マーカー部分のコードを差し替えてください。

あとがき

サイトの雰囲気に合わせて、Googleマップを白黒で表示したいという場合は、ぜひ参考にしていただければと思います。

Googleマップを白黒(グレースケール)にしてサイトに埋め込む方法