以前、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マップを白黒で表示したいという場合は、ぜひ参考にしていただければと思います。