javascriptのデータをページ上に表示したい

Question

前提・実現したいこと

DBから二つのテーブルのデータA,Bを呼んできて１つのウェブページ上に表示させたいです。
Aをマップ上に表示させ、Bはとりあえず画面に表示しようとしてるのですが、
Bを表示しようとするとAのマップが消えてしまいます。
２つのデータを呼び出すところまでは出来ていて表示がうまくいかない状態です。
左側に大きくマップを出して右側にデータ一覧のような形でデータを出したいと思っています

発生している問題・エラーメッセージ

エラーメッセージは見当たりません
見落としてたら申し訳ないです。

エラーメッセージ

該当のソースコード

function initMap() {
        var target = document.getElementById('target');
        var opts = {
          zoom: 15,
          center: new google.maps.LatLng(OOOO, OOOO)
        };
        map = new google.maps.Map(document.getElementById("map"), opts);
        infoWindow = new google.maps.InfoWindow();

}

$(function(){
          $.ajax({
            type: "POST",
            url: "data.php",
            dataType: "json",
            success: function(data){
              markerD = data;
              setMarker(markerD);
            },
            error: function(XMLHttpRequest, textStatus, errorThrown){
              alert('Error : ' + errorThrown);
            }
          });
        });

        $(function(){
          $.ajax({
              type: "POST",
              url: "data2.php",
              dataType: "json",
              success: function(data){
                markerE = data;
                console.log(markerE.length);
              },
              error: function(XMLHttpRequest, textStatus, errorThrown){
                alert('Error : ' + errorThrown);
              }
          });
        });

        function setMarker(markerData) {

          console.log(markerData);
          console.log(markerData.length);

          //マーカー生成
          var sidebar_html = "";
          var icon;

          for (var i = 0; i < markerData.length; i++) {

            var latNum = parseFloat(markerData[i]['lat']);
            var lngNum = parseFloat(markerData[i]['lon']);

            console.log(map);

            // マーカー位置セット
            var markerLatLng = new google.maps.LatLng({
              lat: latNum,
              lng: lngNum
            });

            // マーカーのセット
            marker[i] = new google.maps.Marker({
              position: markerLatLng,          // マーカーを立てる位置を指定
              map: map,                        // マーカーを立てる地図を指定
              animation: google.maps.Animation.DROP                    // アイコン指定
            });

            markerEvent(i,'<div class="name">' + markerData[i]['name'] + '</div>');

          }

        // サイドバー
        document.getElementById("sidebar").innerHTML = sidebar_html;
      }

      function markerEvent(i, html) {
        marker[i].addListener('click', function() {
          infoWindow.setContent( html );
          infoWindow.open(map, marker[i]);
      });

<?php

  //ヘッダー情報の設定
  header("Content-Type: application/json; charset=utf-8");

  $data = array();

  $pdo = new PDO("mysql:dbname=OO; host=OO port=OO", "OO", "OO");

  $sql = "SELECT * FROM OO";
  $sth = $pdo -> prepare($sql);
  $sth -> execute();

  //データを取得する
  $data = $sth -> fetchAll(PDO::FETCH_ASSOC);

  //jsonオブジェクト化
  echo json_encode($data);
?>

試したこと

どのサイトか覚えてないですが、初心者なため色々なサイトを参考に
ツギハギして作りました。
見にくくて申し訳ないです。

補足情報（FW/ツールのバージョンなど）

ここにより詳細な情報を記載してください。

Comments

[miyabi_pudding]

可能なら、data.phpと、data2.phpの内容も記載した方が回答つきやすいと思います。

[kei344]

提示コードであれば、mapが定義されていないので1つも表示されませんよ。

[Lhankor_Mhy]

kei344さんのおっしゃる通り、コードが足りないと思います。
どこかで、google.maps.Map() を呼んでいるはずです。

[SKMT]

マップを呼ぶ部分はAPIキーがあるので丸ごと伏せています。

[kei344]

現在の質問文からは「マップを呼ぶ部分に問題があるので質問文の状況になっています。」という回答になります。

[miyabi_pudding]

SKMTさん > APIキーの文字列だけ、伏字にして、処理自体は記載いただけないでしょうか？
今のままでは、key344さんのおっしゃるように、解決に繋がるような回答をすることはできません。

[Lhankor_Mhy]

> マップを呼ぶ部分はAPIキーがあるので丸ごと伏せています。

その部分が setMarker の中にあるのではないでしょうか。
だとすると、それが問題です。

[SKMT]

google.maps.Map()は追加したinitMapの中にあります。
APIキーは別のところでしたすみませんでした、、

[Lhankor_Mhy]

console.log(markerE.length);

↑この部分を↓こうすると、

setMarker(markerE)

markerDが消えてしまう、ということでいいんですよね？

[SKMT]

すみません、ちょっと違っていて
Eの方はsetMarkerとは別で画面上の地図のないところに出したいんですけど
その出し方が分かりません
ここに載せたコードはDは表示出来てEも読み込めてはいるけど
どうすれば画面に表示出来るかわからない状態です。
画面が消えた時のコードはすぐ消してしまったので分かりませんごめんなさい

[Lhankor_Mhy]

質問に『Bを表示しようとするとAのマップが消えてしまいます。』とありますが、これが『画面上の地図のないところに出したいんですけどその出し方が分かりません』という意味である、ということですか？

つまり、Googleマップとは特に関係のない話である、という理解で合っていますか？

[SKMT]

そうですね、書き方が悪くてすみません
関係ないのかもしれないです
表示するために無理やりコードを書いたら
表示できていたマップまで表示できなくなって焦ってました

[Lhankor_Mhy]

回答者に意図が伝わっていないと思うので、質問を編集した方が回答がつくのではないかな、と思いました。

Answer 1

まあとりあえず、この辺から始めてみては？

var div = document.createElement('div');
div.innerText = JSON.stringify(markerE);
document.body.appendChild(div);

> このコードの解説をつけて

はい。

var div = document.createElement('div');

↑で空のdiv要素を作成し、
Document.createElement - Web API | MDN

div.innerText = JSON.stringify(markerE);

↑innerText属性で内部のテキストを設定し、
（どのようなテキストが必要なのかわからなかったため、JSON文字列に戻しています）
Node.innerText - Web API | MDN
JSON.stringify() - JavaScript | MDN

document.body.appendChild(div);

↑作成したdiv要素をbody要素の最後に追加しています。
Document.body - Web API | MDN
Node.appendChild - Web API | MDN

Comments

[SKMT]

画面表示できました！ありがとうございます！あと他に使い回せるようにできればこのコードの解説をつけてもらえると嬉しいです！

[SKMT]

返信遅くなって申し訳ないです。丁寧な解説ありがとうございます！