- ベストアンサー
googlemap、mysqlでサイドバーが表示されない問題
- googlemap、mysqlを使用してサイドバーを表示するシステムを作成していますが、マーカーは表示されるもののサイドバーが表示されません。
- サイドバーにはデータベースから取得したタイトルを表示する予定です。
- 問題のソースコードを添削していただきたいです。
- みんなの回答 （4）
- 専門家の回答
質問者が選んだベストアンサー
何度もスミマセン。 //以下の呼び出しを変更 createMarkerButton(marker); ↓ createMarkerButton(marker,title); //createMarkerButtonの関数を以下の通り変更。引数titleを追加 function createMarkerButton(marker,title) { //サイドバーにマーカ一覧を作る var ul = document.getElementById("marker_list"); var li = document.createElement("li"); //var title = marker.getTitle(); ←削除 li.innerHTML = title; ul.appendChild(li); //サイドバーがクリックされたら、マーカーを擬似クリック google.maps.event.addDomListener(li, "click", function(){ google.maps.event.trigger(marker, "click"); }); } シンプルに直してみました。
その他の回答 (3)
- nekomikekamo
- ベストアンサー率73% (71/97)
#2です。 そもそも、サイドバーを表示させる場所 <ul id="marker_list"></ul> がないですね・・・。
補足
回答ありがとうございます。 サイトに表示させることができたのですが、表示内容が「•undefined」になっていました。 何度もすいません、解決方法があればアドバイスください宜しくお願いします。
- nekomikekamo
- ベストアンサー率73% (71/97)
createMarkerButtonの呼び出しタイミングに問題があると思われます。 map.addOverlay(marker);の下辺りで実行すればいいのではないですか？ コードがJS的に結構難有りです。 //以下のようにmap.addOverlayすぐ下で実行 map.addOverlay(marker); createMarkerButton(marker);
補足
回答ありがとうございます。 map.addOverlay(marker); createMarkerButton(marker); と下で実行を行って試してみたのですが、サイドバーは表示されず、うまくいきませんでした。 アドバイスいただきありがとうございました。
- muuming2001
- ベストアンサー率23% (202/847)
もう少し、ご自身での問題切り分けはできないでしょうか？ posts.phpも読み込むんですよね？ 今の質問内容ではここに問題ある場合わかりませんよ？ 丸投げしすぎと感じました。
補足
すいません。質問内容が不十分でした。 「posts.php」を読み込んでいます。「posts.php」ではXMLを生成してmysqlの「posts」というテーブルから latitude,longitude（経度・緯度）、title、nitiji、message、pictureを選択して渡しています。 ソースは以下の通りです。 ちなみにこちらのサイトを参考につくりました。 https://developers.google.com/earth/articles/phpsqlearth?hl=ja ・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・ <?php //sql-info.phpはデータベースに接続するプログラムです require("sql-info.php"); // 以下、XML 生成 $dom = new DOMDocument("1.0"); $node = $dom->createElement("markers"); $parnode = $dom->appendChild($node); // 以下、MySQL への接続 $connection=mysql_connect ('localhost', $username, $password); if (!$connection) { die('Not connected : ' . mysql_error()); } $db_selected = mysql_select_db($database, $connection); mysql_set_charset('utf8'); if (!$db_selected) { die ('Can\'t use db : ' . mysql_error()); } // 以下、「posts」テーブルからフィールド選択 $query = "SELECT * FROM posts WHERE 1"; // 場合によりコマンドを応用 $result = mysql_query($query); if (!$result) { die('Invalid query: ' . mysql_error()); } header("Content-type: text/xml"); // 以下、フィールドの値をXML へ渡す while ($row = @mysql_fetch_assoc($result)){ $node = $dom->createElement("marker"); $newnode = $parnode->appendchild($node); $newnode->setattribute("latitude", $row['latitude']); $newnode->setattribute("longitude", $row['longitude']); $newnode->setattribute("title", $row['title']); $newnode->setattribute("nitiji", $row['nitiji']); $newnode->setattribute("message", $row['message']); $newnode->setattribute("picture", $row['picture']); } echo $dom->saveXML(); ?> ・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・ そして先ほどのプログラムで「posts.php」を読み込んでmysqlのデータ（latitude,longitude、title、nitiji、message、picture）を出力させマーカーごとに情報ウィンドウを表示させています。そこまではうまく動作したのですが、サイドバーを作成してマーカー一覧（読み込んだtitle）を表示したいのですがうまくいきません。 サイドバーの表示はこちらのサイトを参考にしました。 http://googlemaps.googlermania.com/google_maps_api_v3/ja/map_example_sidebar.html このサイトにあるサンプルコードの必要だと思った部分だけをソースに加えただけになっています。 加えたソースは一つ目は ・・・・・・・・・・・・・・・・・・・・・・・ function initialize() { //サイドバーのボタンを作成 createMarkerButton(marker); } ・・・・・・・・・・・・・・・・・・・・・・・ 二つ目は ・・・・・・・・・・・・・・・・・・・・・・・・・・・・ function createMarkerButton(marker) { //サイドバーにマーカ一覧を作る var ul = document.getElementById("marker_list"); var li = document.createElement("li"); var title = marker.getTitle(); li.innerHTML = title; ul.appendChild(li); //サイドバーがクリックされたら、マーカーを擬似クリック google.maps.event.addDomListener(li, "click", function(){ google.maps.event.trigger(marker, "click"); }); } google.maps.event.addDomListener(window, "load", initialize); ・・・・・・・・・・・・・・・・・・・・・・・・・・・・ になります。サンプルコードの内容もあまり理解できないまま利用したので、この二つの部分が間違っていると思うのですが、理解できていない状況です。 説明が不十分で申し訳ありませんでした。よろしければ再度添削をよろしくお願いします。
お礼
回答ありがとうございます。 無事サイドバーに「title」を表示させることができました。 アドバイスいただき、本当にありがとうございました。 まだ、サイドバーに表示されているのが、クリック式でなく、文字表示になっているので自分なりに頑張って直してみます。 お世話になりました。