Google Maps APIを利用して表示するGoogleマップで、マーカーを目立たせるために地図のデザインを変更します。地図全体をグレースケールにして、地図上の観光スポット、施設、学校、公園等は非表示にします。
html、css、Googleマップのデザイン変更以外のjavascriptは下記の記事と同様です。
javascriptのコードです。
Googleマップのデザイン変更はMapクラスのオプションであるstylesプロパティで指定します。指定の形式はJSONです。
まず、地図全体をグレースケールにします。featureTypeとelementTypeにallを指定して、stylersでsaturation（彩度）を-100にします。次に地図上の観光スポット、施設、学校、公園等を非表示にします。featureTypeにpoi（観光スポット、施設、学校、公園等）、elementTypeにallを指定して、stylersでvisibilityをoffにします。
なお、featureType（地物）とelementType（要素）の記述を省略するとデフォルトでallの指定になります。
function initMap() {
var latlng = new google.maps.LatLng(35.6843218, 139.70311200000003); //中心の緯度, 経度
var map = new google.maps.Map(document.getElementById('maps'), {
zoom: 17,
center: latlng,
styles: [
{
featureType: 'all',
elementType: 'all',
stylers: [
{saturation: -100}, //彩度に-100を指定してグレースケールに
],
},
{
featureType: 'poi', //観光スポット、施設、学校、公園等
elementType: 'all',
stylers: [
{visibility: 'off'},
],
}
]
});
var marker = new google.maps.Marker({
position: latlng,
map: map
});
}