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

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

Googleマップを白黒(グレースケール)にしてサイトに埋め込む方法
  • シェアしてね♪
  • このエントリーをはてなブックマークに追加
  • follow us in feedly


  • 一式98,000円~の格安プランをご用意!Web制作お任せください!
  • このエントリーをはてなブックマークに追加
  • follow us in feedly

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

この記事が気に入ったら
いいね!してね♪

Twitter で
スポンサードリンク

関連記事

コメントを残す

メールアドレスが公開されることはありません。