• ベストアンサー
※ ChatGPTを利用し、要約された質問です(原文:GoogleMapsで<UL>タグとの連携)

GoogleMapsで<UL>タグとの連携

このQ&Aのポイント
  • GoogleMapsで<UL>タグとの連携についてのアドバイスをお願いします。
  • サンプルのコードをベースにしてマップ上に<UL>タグのリストを配置し、リンクをクリックすると該当するマーカーがマップの中央に表示されるようにしたいです。
  • 具体的な実装方法が分からず困っています。アドバイスをいただけると助かります。

質問者が選んだベストアンサー

  • ベストアンサー
  • my--
  • ベストアンサー率89% (91/102)
回答No.1

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を使えるならそれで組み立ててみてはどうでしょか。

youkazu
質問者

お礼

ありがとうございます. うまくいきました. ただ,リストがマップキャンバスの下に配置されてしまっています. これを,マップキャンバスの右に持って行きたいのですが,どこが問題なのでしょうか. <body> <div id="map_canvas"></div> <ul></ul> </body> ということだけではダメなのでしょうか.

その他の回答 (1)

  • my--
  • ベストアンサー率89% (91/102)
回答No.2

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の右にレイアウトする方法を適当なカテゴリで改めて質問した方がいいです。

youkazu
質問者

お礼

なるほど.スタイルの話なのですね. 分かりました.自分で調べてみたいと思います. ご丁寧にありがとうございました.

関連するQ&A

専門家に質問してみよう