マルティスープ
Staff Blog

2018.01.14

Googleマップに表示されるお店のアイコンを消したい

みなさん、こんにちは。

Googleマップ上には色々なお店のアイコンがありますが、用途によってはいらないな～と思うことはありませんか？

地図を移動しようとすると、誤ってアイコンをクリックしてしまい、吹き出しが表示してしまうこともよくありますよね。

アイコンのクリック自体は、以下の設定を行えばできなくすることも可能ですが、お店のアイコン自体を消してしまうこともできます。

クリックできなくする方法

var map = new google.maps.Map(document.getElementById("map"), {
	zoom : 18,
	center: new google.maps.LatLng(35.5, 139.5),
	clickableIcons: false
});

アイコンはたくさん表示されますが、クリックしても吹き出しが表示されません。

アイコンを消す方法

var map = new google.maps.Map(document.getElementById("map"), {
	zoom : 18,
	center: new google.maps.LatLng(35.5, 139.5),
	styles: [{
		featureType: 'poi.business',
		stylers: [
			{ visibility: 'off' }
		]
	}]
});

上で表示されていたお店のアイコンがほとんど消されていて、スッキリした地図になりましたね。

いかがでしたか？

ちょっとした設定ですが、だいぶ雰囲気の違う地図になりますよね。是非、自分のサイトに合わせて使い分けしてみてください。

Google マップはアイコンだけではなく、ポリゴンの色や線の色など様々な図形のスタイルを変更することができます。以下のブログにも細かい内容を掲載していますので、参考にしてみてください！

https://maps.multisoup.co.jp/blog/1238/

バイ！