- ベストアンサー
GoogleMapsで<UL>タグとの連携
- GoogleMapsで<UL>タグとの連携についてのアドバイスをお願いします。
- サンプルのコードをベースにしてマップ上に<UL>タグのリストを配置し、リンクをクリックすると該当するマーカーがマップの中央に表示されるようにしたいです。
- 具体的な実装方法が分からず困っています。アドバイスをいただけると助かります。
- youkazu
- お礼率55% (44/80)
- JavaScript
- 回答数2
- ありがとう数2
- みんなの回答 （2）
- 専門家の回答
質問者が選んだベストアンサー
function initialize(data) { ... var ul = $('<ul />').appendTo('body'); // ulを生成して（とりあえず）bodyに追加挿入 var i = data.length; while (i-- > 0) { ... var marker = new google.maps.Marker(obj); var li = $('<li />').appendTo(ul); // liを生成してulに追加挿入 var text = '名前：' + dat.name; // テキスト var span = $('<span />').text(text); // spanを生成してテキストを設定 li.append(span); // spanをliに追加挿入 li.click(makeClickFunc(obj.position)); // clickイベントにpanTo()を実行する関数を設定 } // LatLngオブジェクトを受け取りpanTo()を実行する関数オブジェクトを返す function makeClickFunc(latLng) { return function () { map.panTo(latLng); }; } } DOM要素の生成、挿入やイベント関連はjQueryなら割りと簡単に書けます。 資料も充実してますから、jQueryを使えるならそれで組み立ててみてはどうでしょか。
その他の回答 (1)
- my--
- ベストアンサー率89% (91/102)
var ul = $('<ul />').appendTo('body'); // ulを生成して（とりあえず）bodyに追加挿入 この時点でbody要素に追加挿入されます。別の要素を指定するのも簡単ですから「jQuery セレクタ」で調べてみて下さい。 ul.addClass('className'); レイアウトのほうはclass属性でも設定してCSSでやってしまえば良いと思いますよ。 <body> <div id="map_canvas">...</div> <ul class="className">...</ul> </body> CSSも良く分からなければ、#map_canvasの右にレイアウトする方法を適当なカテゴリで改めて質問した方がいいです。
お礼
なるほど．スタイルの話なのですね． 分かりました．自分で調べてみたいと思います． ご丁寧にありがとうございました．
お礼
ありがとうございます． うまくいきました． ただ，リストがマップキャンバスの下に配置されてしまっています． これを，マップキャンバスの右に持って行きたいのですが，どこが問題なのでしょうか． <body> <div id="map_canvas"></div> <ul></ul> </body> ということだけではダメなのでしょうか．