MULTISOUP

MULTISOUP

MULTISOUP

Staff Blog

Introduction example

2018.01.14

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

poi_hide

みなさん、こんにちは。

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/

 

バイ!

 

【関連記事】こんな記事も読まれています

2017.04.23

KML を GeoJSON に変換して描画する

みなさん、こんちには。

最近、Google マイマップを使って図形を描画する機会がありました。

そこで、マイマップの機能を使い、K・・・

続きを読む

2017.12.17

マーカーにスタイルを適用してラベルを描画する

みなさん、こんにちは。

今回は Google Map JavaScript API でマーカーを描画する際に、スタイルを適用したラベルの描・・・

続きを読む

2016.09.27

MarkerClusterer ライブラリの紹介

みなさん、こんにちは!

 

Google Maps 上に 店舗の情報などマーカーをたくさん描画したとき、マーカー・・・

続きを読む

 - Google Maps JavaScript API