Google Maps：同マップ内でそれぞれのアイコンの表示・非表示を切り替えるには

質問

いつもお世話になっております。

Google Mapsを利用し、同マップ内でそれぞれのアイコンの表示・非表示を切り替えたいという要望を受けたのですが、やりかたがわからず途方に暮れています。

- 要望 -------------------------------------------
1.Google Maps内にカテゴリ1～6に属する、デザインがちがうアイコンをそれぞれ3つずつ表示。
2.このアイコンを、カテゴリ群ごとにボタンか何かで表示・非表示を切り替える。
--------------------------------------------------

[1]に関してはできたのですが、[2]のやり方がわかりませんでした。
代替案として、カテゴリごとにGoogle Mapsを読み込むhtmlを変えて
iframe内で表示するというのを出したのですが、
“同マップ上でアイコンだけ表示したり消したり”したいとの
ことでした。

[1]を実現するのに使用したコードが下記になります。
(※マーカーの関するスクリプトだけ外部ファイル化し、bodyにonloadでcreateMapを読み込んでいます)

-----------------------------------------------------
function createMap() {
var map = new GMap2(document.getElementById("map"));
map.addControl(new GLargeMapControl());
map.addControl(new GOverviewMapControl());
map.setCenter(new GLatLng(緯度, 経度), 13);

var icon = new GIcon();
icon.image = "marker.png";
icon.shadow = "shadow.png";
icon.iconSize = new GSize(20, 34);
icon.iconAnchor = new GPoint(10, 34);
icon.infoWindowAnchor = new GPoint(7, 1);

var icon2 = new GIcon();
icon2.image = "marker2.png";
icon2.shadow = "shadow.png";
icon2.iconSize = new GSize(20, 34);
icon2.iconAnchor = new GPoint(10, 34);
icon2.infoWindowAnchor = new GPoint(7, 1);

var point001 = new GLatLng(緯度, 経度);
var marker001 = new GMarker(point001, icon);
map.addOverlay(marker001);
GEvent.addListener(marker001, 'click', function() {
marker001.openInfoWindowHtml('<div style="width: 300px">吹き出し<\/div>');
});
var point002 = new GLatLng(緯度, 経度);
var marker002 = new GMarker(point002, icon2);
map.addOverlay(marker002);
GEvent.addListener(marker002, 'click', function() {
marker002.openInfoWindowHtml('<div style="width: 300px">吹き出し<\/div>');
});

}

---------------------------------------------- ここまで

方法について、ご存じの方がいらっしゃったら
教えていただきたいです。
よろしくお願いいたします！

回答No.2

gau_puzzler

カテゴリ群に自分で分けて管理すればいいだけでしょう
var groupA = new Array;
groupA.push(icon1);
groupA.push(icon2);
とかやっておいて、適当なボタンのイベントにおいて
それらを非表示、表示とかすればいいだけです

お礼

回答ありがとうございます。
JavaScript自体初心者なので上手にいってませんが、
参考にさせていただきます。

回答No.1

yyr446

GmapsUtiltyLibのMarkerManagerクラスが提供されています。
(本家のGMarkerManagerクラスとは別物)
http://code.google.com/p/gmaps-utility-library-dev/wiki/Libraries
リファレンス
http://gmaps-utility-library.googlecode.com/svn/trunk/markermanager/release/docs/reference.html
これがつかえるにでは。
カテゴリー毎のマーカーを、それぞれ別のマーカーマネージャーに
追加し、マーカーマネージャー単位に表示・非表示する。

お礼

ありがとうございます。
まだ上手くはいっていないのですが、参考にさせていただきます。