Google Maps API で場所アイコンのポップアップ (POI) を消す

2018å¹´6月6日追記：ここに掲載されている情報は古くなっています。現在は公式な方法が利用できます。→Google Maps API で場所アイコンのポップアップ (POI) を消す (v3.26)

地図を使った Web ページを作るときに便利な Google Maps JavaScript API だが、自分で用意したマーカなどの要素とは別に、主要なスポットがアイコンとラベルで示され、クリックするとその説明が出るようになっている。（このスポットを point of interest; POI と呼ぶ）

ただ単に地図を見るときには役立つが、API を使って何か作ろうという場合は邪魔になることがほとんどだ。

解決法は二つある。

POI アイコン自体を消す

一つ目は POI のアイコン自体を非表示にする方法だ。もちろんその場所をクリックしても何も起きない。

次のようにマップタイプを定義して設定する。

var simpleMapStyle, map;

// POI を非表示にするマップタイプを定義
simpleMapStyle = new google.maps.StyledMapType([
	{
		featureType: "poi",
		elementType: "labels",
		stylers: [
			{ visibility: "off" }
		]
	}
], { name: "Simple Map" });

map = new google.maps.Map(...);

// マップタイプを追加して設定
map.mapTypes.set("simple_map", simpleMapStyle);
map.setMapTypeId("simple_map");

この方法は正攻法ではあるが、地図ががらんとして場所が分かりにくくなる欠点がある。

POI のポップアップのみ無視する方法

もうひとつの方法は Stack Overflow への書き込みからの紹介になる。

この方法は、ポップアップを表示している google.maps.InfoWindow のプロトタイプを書き換えることで、POI から開かれたポップアップを無視するようになっている。

(function fixInfoWindow() {
	var set = google.maps.InfoWindow.prototype.set;
	google.maps.InfoWindow.prototype.set = function(key, val) {
		if (key === "map") {
			if (! this.get("noSuppress")) {
				return;
			}
		}
		set.apply(this, arguments);
	}
})();

ただし InfoWindow のオプションに “noSuppress” が設定されていない通常のポップアップは表示されなくなってしまうので、ポップアップを作るたびに noSuppress = true を設定する必要がある。特に他人の作ったコードを使うときは注意が必要だ。

var popup = new google.maps.InfoWindow({
	content: "POIのばーか",
	noSuppress: true
});
popup.setPosition(new google.maps.LatLng(36.564546, 136.6593));
popup.open(map);

すでに生成された InfoWindow に対しては次のように設定する。

popup.set("noSuppress", true);