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.07.09

Geocoding API を使って郵便番号から住所を入力するフォーム

みなさん、こんにちは。

よく入力フォームで住所を入力するとき、郵便番号から自動で住所を入力する方法がありますね。今回は、Google Maps・・・

続きを読む

2017.02.07

Google Maps 無償版の利用制限について

みなさん、こんにちは:)

今日は、お客さまからの問い合わせが多い Google Maps APIs の無償版(スタンダードプラン)の利用制限に・・・

続きを読む

2017.11.05

JavaScript APIでカスタムコントロールを試す

みなさん、こんにちは。

Google Maps JavaScript API を使用して地図を表示し、地図上に検索用のテキストボックスを置・・・

続きを読む

 - Google Maps JavaScript API

お問い合わせお見積もりから開発のご相談まで、お気軽にお問い合わせください。

(※)は入力必須項目です。

当社では、お客様がお問い合わせの際に必要な個人情報または、 お問い合わせ内容等につきましては、
お問い合わせの回答の目的のみに利用します。

Google Maps for Work™に関するご質問やお見積りは、
マルティスープまでお気軽にお問い合わせください03-3518-9013 (受付時間:平日 9:00−18:00)