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

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

ただいまの
回答率

88.91%

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

受付中

回答 0

投稿

  • 評価
  • クリップ 0
  • VIEW 1,101

Kenji-kawamura

score 27

<!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};

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

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

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

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

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 過去に投稿した質問と同じ内容の質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

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

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

  • ただいまの回答率 88.91%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

関連した質問

同じタグがついた質問を見る