いつもお世話になっております。
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>');
});
}
---------------------------------------------- ここまで
方法について、ご存じの方がいらっしゃったら
教えていただきたいです。
よろしくお願いいたします!
A 回答 (2件)
- 最新から表示
- 回答順に表示
No.2
- 回答日時:
カテゴリ群に自分で分けて管理すればいいだけでしょう
var groupA = new Array;
groupA.push(icon1);
groupA.push(icon2);
とかやっておいて、適当なボタンのイベントにおいて
それらを非表示、表示とかすればいいだけです
No.1
- 回答日時:
GmapsUtiltyLibのMarkerManagerクラスが提供されています。
(本家のGMarkerManagerクラスとは別物)
http://code.google.com/p/gmaps-utility-library-d …
リファレンス
http://gmaps-utility-library.googlecode.com/svn/ …
これがつかえるにでは。
カテゴリー毎のマーカーを、それぞれ別のマーカーマネージャーに
追加し、マーカーマネージャー単位に表示・非表示する。
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- JavaScript 1日1回引けるJavaScriptおみくじについて 1 2022/12/12 22:28
- JavaScript 画像の表示位置 3 2022/12/23 08:25
- JavaScript clear機能を失わずにファイルアップロード機能を作成したい 3 2023/06/10 16:12
- JavaScript GoogleChart 階層ごとのブロックの長さを個別に設定したい 1 2022/07/06 14:27
- JavaScript html5に変えるとスライドショーが消えてしまった。 3 2022/03/26 19:53
- C言語・C++・C# C#テキストボックスの文字を配列にいれてその後表示する 4 2022/07/17 04:47
- その他(プログラミング・Web制作) Leafletで画像をon、offさせる方法について 2 2022/11/01 15:34
- JavaScript WordPressのコンタクトフォーム7にて送信者の位置情報を送らせたい 2 2022/09/14 23:28
- JavaScript gasについて 1 2022/05/31 21:51
- HTML・CSS CSS のみのタブ切り替えについて 1 2023/01/11 16:47
関連するカテゴリからQ&Aを探す
おすすめ情報
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
迷路探索プログラムを作るには...
-
カンマ区切りのデータを配列に...
-
JQueryでAjax通信をキャンセル...
-
readyStateが4にならない原因
-
フレーム内の要素へのXPATHはど...
-
[jQuery UI] sortableを使いaja...
-
JavascriptからPHPへのAjax通信...
-
jQuery toggle() 戻るで開いた...
-
階層別の組織図の自動作成について
-
要素内を常に一番下を表示させたい
-
IndexedDB を使ってファイルア...
-
.txtファイルの読み込み
-
スクリプトの外部からの読み込み
-
bxsliderで画像毎に表示時間を...
-
Javascriptを使ってQRコード読...
-
Selenium4でボタンをクリックで...
-
SQLのmaxで求めた値を変数に代...
-
FullCalendar の複数月表示につ...
-
メールを送信するボタンでOutlo...
-
日付が変わると自動更新
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
カンマ区切りのデータを配列に...
-
二つのbxsliderをレスポンシブ...
-
たくさんの経由地がある巡回ル...
-
迷路探索プログラムを作るには...
-
C言語の 配列の中 出力について
-
google maps api v3のルート検索
-
Google Maps:同マップ内でそれ...
-
Googleストリートビューの写真...
-
webサービス上のkmlをgooglemap...
-
Googleマップのウィンドウの表示
-
Haskellのsubtractについて
-
google maps 吹き出しカウント...
-
数字をピクチャボックスの上に...
-
GoogleMapの移動量
-
GoogleMapでアイコンを500件表...
-
googleマップが表示されない。
-
グーグルマップにマーカーを色...
-
ドラッグ & ドロップでのド...
-
JavascriptからPHPへのAjax通信...
-
階層別の組織図の自動作成について
おすすめ情報