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

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

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

Firebaseは、Googleが提供するBasSサービスの一つ。リアルタイム通知可能、並びにアクセス制御ができるオブジェクトデータベース機能を備えます。さらに認証機能、アプリケーションのログ解析機能などの利用も可能です。

JavaScript

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

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

Google マップ

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

Q&A

0回答

1892閲覧

Firebaseを使ったチャットアプリでgooglemapの緯度経緯に指定した変数の値がundefineになってしまう

knj

総合スコア37

Firebase

Firebaseは、Googleが提供するBasSサービスの一つ。リアルタイム通知可能、並びにアクセス制御ができるオブジェクトデータベース機能を備えます。さらに認証機能、アプリケーションのログ解析機能などの利用も可能です。

JavaScript

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

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

Google マップ

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

0グッド

0クリップ

投稿2017/05/24 13:22

<!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"> <title>Chatアプリ</title> <style> html, body { height: 100%; margin: 0; padding: 0; } #map, #pano { float: left; height: 50%; width: 45%; } </style> </head> <body> <!-- コンテンツ表示画面 --> <div> <div> 名前<input type="text" id="username"> </div> <div> <textarea id="text" rows="5"></textarea> <button id="send">送信</button> <button id="mapsend">視界送信</button> <button id="mapget">視界受信</button> </div> <div id="output"></div> </div> <!-- map関連のhtml --> <div id="map"></div> <div id="pano"></div> <!-- JavaScript --> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> <script src="https://www.gstatic.com/firebasejs/3.9.0/firebase.js"></script> <script src="sweetalert-master/dist/sweetalert.min.js"></script> <link rel="stylesheet" type="text/css" href="sweetalert-master/dist/sweetalert.css"> <script> // Firebase接続 // Initialize Firebase var lat = 0; var lon = 0; var a = 0; var b = 0; var x = 0; var y = 0; var usermap3 = 0; var usermap4 = 0; var usermap5 = 0; var usermap6 = 0; //firebase接続 var config = { apiKey: "AIzaSyB3yaRU9pxASNmX86M7zt-fJWUBezHjetw", authDomain: "chat-f5b6c.firebaseapp.com", databaseURL: "https://chat-f5b6c.firebaseio.com", projectId: "chat-f5b6c", storageBucket: "chat-f5b6c.appspot.com", messagingSenderId: "539383756587" }; firebase.initializeApp(config); //MSG送受信 var newPostRef = firebase.database().ref(); //Submit:MSG送信 $('#send').on('click', function() { newPostRef.push({ username: $('#username').val(), text: $('#text').val() }); $('#text').val(); }); //MSGデータ受信 newPostRef.on("child_added", function(data) { var v = data.val(); //データの取得 var k = data.key; var str = '<dl id="'+ k +'"><dt>'+ v.username +'</dt><dd>'+ v.text +'</dd></dl>'; $('#output').prepend(str); }); //-------------------------------------------------------------------- //位置情報を取得、firebaseに格納 function all() { navigator.geolocation.getCurrentPosition( function(position) { var data = position.coords; //データの整理 lat = data.latitude; lon = data.longitude; //allert表示 alert("緯度経緯は" + lat + "と" + lon); newPostRef.push({ //firebaseに緯度経緯を格納 usermap1: lat, usermap2: lon }); } )} function mapper() { //googlemapの処理 function mapsInit(position) { newPostRef.on("child_added", function(data) { var z = data.val(); var kk = data.key; x = z.usermap1; y = z.usermap2; }); var m = x; var n = y; var fenway = {lat: m, lng: n}; var map = new google.maps.Map(document.getElementById('map'), { center: fenway, zoom: 14 }); var panorama = new google.maps.StreetViewPanorama( document.getElementById('pano'), { position: fenway, pov: { heading: 34, pitch: 10 } }); map.setStreetView(panorama); }; //2. 位置情報の取得に失敗した場合の処理 function mapsError(error) { var e = ""; if (error.code == 1) { //1=位置情報取得が許可されてない(ブラウザの設定) e = "位置情報が許可されてません"; } if (error.code == 2) { //2=現在地を特定できない e = "現在位置を特定できません"; } if (error.code == 3) { //3=位置情報を取得する前にタイムアウトになった場合 e = "位置情報を取得する前にタイムアウトになりました"; } alert("エラー:" + e); }; //3.位置情報取得オプション var set ={ enableHighAccuracy: true, //より高精度な位置を求める maximumAge: 20000, //最後の現在地情報取得が20秒以内であればその情報を再利用する設定 timeout: 10000 //10秒以内に現在地情報を取得できなければ、処理を終了 }; // function initialize() { navigator.geolocation.getCurrentPosition(mapsInit, mapsError, set); // } } //クリックイベント自分の視界を表示、送信 $('#mapsend').on("click", function() { all(); //値をfirebaseへセット //位置情報のデータをfirebaseから取り出す処理 if(x !== null && y !== null) { swal("自分の位置情報を取得!", "自分の視界を送信しました", "success"); mapper(); } else { swal({ title: "エラーが発生しました", text: "自動的にリロードされます", timer: 5000, showConfirmButton: false }); setTimeout("location.reload()",5000); } }); //クリックイベント相手の視界を受信表示 $('#mapget').on("click", function() { //mapper関数実装 if(x !== null && y !== null) { mapper(); console.log("到達してるよ" + x); } else { swal({ title: "エラーが発生しました", text: "自動的にリロードされます", timer: 5000, showConfirmButton: false }); setTimeout("location.reload()",5000); } }); </script> <script async defer src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBykP3LGzhuVBBUDm59QpKWr43AZuqP1TI&callback=initialize"> </script> </script> </body> </html>
js?key=AIzaSyBykP3LGzhuVBBUDm59QpKWr43AZuqP1TI&callback=initialize:38 InvalidValueError: setCenter: not a LatLng or LatLngLiteral: in property lat: not a number _.rb @ js?key=AIzaSyBykP3LGzhuVBBUDm59QpKWr43AZuqP1TI&callback=initialize:38 _.oc @ js?key=AIzaSyBykP3LGzhuVBBUDm59QpKWr43AZuqP1TI&callback=initialize:48 (anonymous) @ js?key=AIzaSyBykP3LGzhuVBBUDm59QpKWr43AZuqP1TI&callback=initialize:59 _.k.setValues @ js?key=AIzaSyBykP3LGzhuVBBUDm59QpKWr43AZuqP1TI&callback=initialize:105 tg @ js?key=AIzaSyBykP3LGzhuVBBUDm59QpKWr43AZuqP1TI&callback=initialize:90 mapsInit @ sample.html:117 js?key=AIzaSyBykP3LGzhuVBBUDm59QpKWr43AZuqP1TI&callback=initialize:38 InvalidValueError: setPosition: not a LatLng or LatLngLiteral: in property lat: not a number _.rb @ js?key=AIzaSyBykP3LGzhuVBBUDm59QpKWr43AZuqP1TI&callback=initialize:38 _.oc @ js?key=AIzaSyBykP3LGzhuVBBUDm59QpKWr43AZuqP1TI&callback=initialize:48 (anonymous) @ js?key=AIzaSyBykP3LGzhuVBBUDm59QpKWr43AZuqP1TI&callback=initialize:59 _.k.setValues @ js?key=AIzaSyBykP3LGzhuVBBUDm59QpKWr43AZuqP1TI&callback=initialize:105 Vf @ js?key=AIzaSyBykP3LGzhuVBBUDm59QpKWr43AZuqP1TI&callback=initialize:84 mapsInit @ sample.html:121

こんなエラーになってしまう。

//googlemapの処理 function mapsInit(position) { newPostRef.on("child_added", function(data) { var z = data.val(); var kk = data.key; x = z.usermap1; y = z.usermap2; }); var m = x; var n = y; var fenway = {lat: m, lng: n};

ここでデータを送れない。

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

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

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

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

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

guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだ回答がついていません

会員登録して回答してみよう

アカウントをお持ちの方は

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問