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/

 

バイ!

 

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

2016.07.24

スタイルマップを使用して地図の雰囲気を変えてみる

みんさん、こんにちは!

いつも見慣れたグーグルマップだけど、利用するためには地図の色が雰囲気に合わない事ってありますよね? 実はグーグルマップ・・・

続きを読む

2018.07.16

新プランの Autocomplete Per Session とは?

みなさん、こんにちは。

今まで Places API の Autocomplete は、1文字単位の課金しかありませんでした。1文字入力する毎・・・

続きを読む

2018.04.26

Googleマップでマーカーの回転

みなさん、こんにちは。

Google マップでマーカーを描画するとき、回転したいなと思うことはありませんか?

例えば、車の走行履歴・・・

続きを読む

 - Google Maps JavaScript API

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

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