質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
Google API

Googleは多種多様なAPIを提供していて、その多くはウェブ開発者向けのAPIです。それらのAPIは消費者に人気なGoogleのサービス(Google Maps, Google Earth, AdSense, Adwords, Google Apps,YouTube等)に基づいています。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

Google マップ

Google Mapは、Google社がオンラインで提供している地図・ローカル検索サービスです。GIS(Geographic Information System:地理情報システム)の中の「WebGIS」に該当します。地図・航空写真・地形の表示方式があり、それぞれユーザーが縮尺を調整して表示させることができます。地域の情報サービスを検索する機能やルート検索の機能も搭載されています。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

Q&A

解決済

1回答

1460閲覧

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

SKMT

総合スコア57

Google API

Googleは多種多様なAPIを提供していて、その多くはウェブ開発者向けのAPIです。それらのAPIは消費者に人気なGoogleのサービス(Google Maps, Google Earth, AdSense, Adwords, Google Apps,YouTube等)に基づいています。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

Google マップ

Google Mapは、Google社がオンラインで提供している地図・ローカル検索サービスです。GIS(Geographic Information System:地理情報システム)の中の「WebGIS」に該当します。地図・航空写真・地形の表示方式があり、それぞれユーザーが縮尺を調整して表示させることができます。地域の情報サービスを検索する機能やルート検索の機能も搭載されています。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

0グッド

0クリップ

投稿2019/12/19 07:00

編集2020/01/10 07:38

前提・実現したいこと

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

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

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

エラーメッセージ

該当のソースコード

javascript

1function initMap() { 2 var target = document.getElementById('target'); 3 var opts = { 4 zoom: 15, 5 center: new google.maps.LatLng(OOOO, OOOO) 6 }; 7 map = new google.maps.Map(document.getElementById("map"), opts); 8 infoWindow = new google.maps.InfoWindow(); 9 10} 11 12$(function(){ 13 $.ajax({ 14 type: "POST", 15 url: "data.php", 16 dataType: "json", 17 success: function(data){ 18 markerD = data; 19 setMarker(markerD); 20 }, 21 error: function(XMLHttpRequest, textStatus, errorThrown){ 22 alert('Error : ' + errorThrown); 23 } 24 }); 25 }); 26 27 $(function(){ 28 $.ajax({ 29 type: "POST", 30 url: "data2.php", 31 dataType: "json", 32 success: function(data){ 33 markerE = data; 34 console.log(markerE.length); 35 }, 36 error: function(XMLHttpRequest, textStatus, errorThrown){ 37 alert('Error : ' + errorThrown); 38 } 39 }); 40 }); 41 42 function setMarker(markerData) { 43 44 console.log(markerData); 45 console.log(markerData.length); 46 47 //マーカー生成 48 var sidebar_html = ""; 49 var icon; 50 51 for (var i = 0; i < markerData.length; i++) { 52 53 var latNum = parseFloat(markerData[i]['lat']); 54 var lngNum = parseFloat(markerData[i]['lon']); 55 56 console.log(map); 57 58 // マーカー位置セット 59 var markerLatLng = new google.maps.LatLng({ 60 lat: latNum, 61 lng: lngNum 62 }); 63 64 // マーカーのセット 65 marker[i] = new google.maps.Marker({ 66 position: markerLatLng, // マーカーを立てる位置を指定 67 map: map, // マーカーを立てる地図を指定 68 animation: google.maps.Animation.DROP // アイコン指定 69 }); 70 71 markerEvent(i,'<div class="name">' + markerData[i]['name'] + '</div>'); 72 73 } 74 75 // サイドバー 76 document.getElementById("sidebar").innerHTML = sidebar_html; 77 } 78 79 function markerEvent(i, html) { 80 marker[i].addListener('click', function() { 81 infoWindow.setContent( html ); 82 infoWindow.open(map, marker[i]); 83 });

php

1<?php 2 3 //ヘッダー情報の設定 4 header("Content-Type: application/json; charset=utf-8"); 5 6 $data = array(); 7 8 $pdo = new PDO("mysql:dbname=OO; host=OO port=OO", "OO", "OO"); 9 10 $sql = "SELECT * FROM OO"; 11 $sth = $pdo -> prepare($sql); 12 $sth -> execute(); 13 14 //データを取得する 15 $data = $sth -> fetchAll(PDO::FETCH_ASSOC); 16 17 //jsonオブジェクト化 18 echo json_encode($data); 19?>

試したこと

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

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

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

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

miyabi_takatsuk

2019/12/19 07:33

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

2019/12/19 14:45

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

2019/12/20 00:17

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

2020/01/09 04:22

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

2020/01/09 04:39

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

2020/01/09 05:38

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

2020/01/10 07:48

> マップを呼ぶ部分はAPIキーがあるので丸ごと伏せています。 その部分が setMarker の中にあるのではないでしょうか。 だとすると、それが問題です。
SKMT

2020/01/10 07:51

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

2020/01/10 08:19

console.log(markerE.length); ↑この部分を↓こうすると、 setMarker(markerE) markerDが消えてしまう、ということでいいんですよね?
SKMT

2020/01/10 08:31

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

2020/01/10 08:35 編集

質問に『Bを表示しようとするとAのマップが消えてしまいます。』とありますが、これが『画面上の地図のないところに出したいんですけどその出し方が分かりません』という意味である、ということですか? つまり、Googleマップとは特に関係のない話である、という理解で合っていますか?
SKMT

2020/01/10 11:24

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

2020/01/11 00:29

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

回答1

0

ベストアンサー

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

js

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

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

はい。

js

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

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

js

1div.innerText = JSON.stringify(markerE);

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

js

1document.body.appendChild(div);

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

投稿2020/01/11 00:36

編集2020/01/14 07:28
Lhankor_Mhy

総合スコア35869

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

SKMT

2020/01/13 21:07

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

2020/01/25 07:39

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

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問