常連

```ここに言語を入力
<!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>

<div id="map"></div>
<div id="pano"></div>



<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 x = 0;
  var y = 0;
  var tal = 0;
  var nol = 0;
  var usermap3 = 0;
  var usermap4 = 0;
  var usermap5 = 0;
  var usermap6 = 0;
  var mapx = 0;
  var mapy = 0;
  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);
});

function all() {
navigator.geolocation.getCurrentPosition(
  function(position) {
    var data = position.coords;
    //データの整理
    lat = data.latitude;
    lon = data.longitude;
    //allert表示
    alert("緯度経緯は" + lat + "と" + lon);
    newPostRef.push({
      usermap1: lat,
      usermap2: lon
      //そもそもここで代入する手段がある
    });
  }
)
}

function set() {
  navigator.geolocation.getCurrentPosition(
    function(position) {
      var data = position.coords;
      //データの整理
      tal = data.latitude;
      nol = data.longitude;
      alert("取得した値は" + tal + "と" + nol);
      newPostRef.push({
        change1: tal,
        change2: nol
      });
    }
  )
}

function mapper() {

  newPostRef.on("child_added", function(data) {
    var z = data.val();
    var kk = data.key;
    change3 = z.change1;
    change4 = z.change2;
    // x = z.usermap1;
    // y = z.usermap2;
    // console.log(usermap3);
    // console.log(usermap4);
    // console.log(usermap5);
    // console.log(usermap6);
    // // x = usermap5;
    // // y = usermap6;
    // console.log(x);
    // console.log(y);
  });

  function mapsInit(position) {

        var fenway = {lat: change3, lng: change4};
        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);
  // }
}

//mapOnlyをメソッド

//クリックイベント
$('#mapsend').on("click", function() {
  // alert("テスト");
  all(); //値をfirebaseへセット
  set(); //mapへ代入するための値をを取得
  mapper();
  if(true) {
    swal("自分の位置情報を取得！", "自分の視界を送信しました", "success");
  } else {
    swal({
          title: "エラーが発生しました",
          text: "自動的にリロードされます",
          timer: 5000,
          showConfirmButton: false
        });
        setTimeout("location.reload()",5000);
  }
});


$('#mapget').on("click", function() {
  console.log("テスト1");
  fuck();
  console.log("到達してるよ");

  // mapper();
  // if(true) {
  //   console.log(usermap3);
  //     swal("相手の位置情報を取得！", "相手の視界を受信しました。画面下部に相手の視界が表示されます。", "success");
  // } else {
  //   // swal({
  //   //       title: "エラーが発生しました",
  //   //       text: "自動的にリロードされます",
  //   //       timer: 5000,
  //   //       showConfirmButton: false
  //   //     });
  //   //     setTimeout("location.reload()",5000);
  //   alert("エラー");
  // }
  // mapper();
});

//mapget関数
function fuck() {
  newPostRef.on("child_added", function(data) {
    var z = data.val();
    var kk = data.key;
    usermap3 = z.usermap1;
    usermap4 = z.usermap2;
    console.log(usermap4 + "取得済");
  });
  // console.log(mapx);
  // console.log(usermap6);
    function mapsInit(position) {

          var fenway = {lat: usermap3, lng: usermap4};
          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);
    // }
}



</script>
<script async defer
    src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBykP3LGzhuVBBUDm59QpKWr43AZuqP1TI&callback=initialize">
</script>



</script>
</body>
</html>

```

エラー内容
```ここに言語を入力

simple.html:235 139.7197362取得済
4simple.html:235 undefined取得済
simple.html:209 到達してるよ
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:104
rg @ js?key=AIzaSyBykP3LGzhuVBBUDm59QpKWr43AZuqP1TI&callback=initialize:89
mapsInit @ simple.html:242
js?key=AIzaSyBykP3LGzhuVBBUDm59QpKWr43AZuqP1TI&callback=initialize:38 InvalidValueError: setPosition: not a LatLng or LatLngLiteral: in property lat: not a number
```
途中まで取得していても最終的にundefineとなる。
firebaseに渡したデータは取得できるが、mapの緯度経緯に代入するとうまく動作しない。
汚いcodeですが、アドバイスお願いします。

firebaseとmapを使ったwebチャットで位置情報を正しく取得できない

```ここに言語を入力
<!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>

<div id="map"></div>
<div id="pano"></div>



<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 x = 0;
  var y = 0;
  var tal = 0;
  var nol = 0;
  var usermap3 = 0;
  var usermap4 = 0;
  var usermap5 = 0;
  var usermap6 = 0;
  var mapx = 0;
  var mapy = 0;
  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);
});

function all() {
navigator.geolocation.getCurrentPosition(
  function(position) {
    var data = position.coords;
    //データの整理
    lat = data.latitude;
    lon = data.longitude;
    //allert表示
    alert("緯度経緯は" + lat + "と" + lon);
    newPostRef.push({
      usermap1: lat,
      usermap2: lon
      //そもそもここで代入する手段がある
    });
  }
)
}

function set() {
  navigator.geolocation.getCurrentPosition(
    function(position) {
      var data = position.coords;
      //データの整理
      tal = data.latitude;
      nol = data.longitude;
      alert("取得した値は" + tal + "と" + nol);
      newPostRef.push({
        change1: tal,
        change2: nol
      });
    }
  )
}

function mapper() {

  newPostRef.on("child_added", function(data) {
    var z = data.val();
    var kk = data.key;
    change3 = z.change1;
    change4 = z.change2;
    // x = z.usermap1;
    // y = z.usermap2;
    // console.log(usermap3);
    // console.log(usermap4);
    // console.log(usermap5);
    // console.log(usermap6);
    // // x = usermap5;
    // // y = usermap6;
    // console.log(x);
    // console.log(y);
  });

  function mapsInit(position) {

        var fenway = {lat: change3, lng: change4};
        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);
  // }
}

//mapOnlyをメソッド

//クリックイベント
$('#mapsend').on("click", function() {
  // alert("テスト");
  all(); //値をfirebaseへセット
  set(); //mapへ代入するための値をを取得
  mapper();
  if(true) {
    swal("自分の位置情報を取得！", "自分の視界を送信しました", "success");
  } else {
    swal({
          title: "エラーが発生しました",
          text: "自動的にリロードされます",
          timer: 5000,
          showConfirmButton: false
        });
        setTimeout("location.reload()",5000);
  }
});


$('#mapget').on("click", function() {
  console.log("テスト1");
  fuck();
  console.log("到達してるよ");

  // mapper();
  // if(true) {
  //   console.log(usermap3);
  //     swal("相手の位置情報を取得！", "相手の視界を受信しました。画面下部に相手の視界が表示されます。", "success");
  // } else {
  //   // swal({
  //   //       title: "エラーが発生しました",
  //   //       text: "自動的にリロードされます",
  //   //       timer: 5000,
  //   //       showConfirmButton: false
  //   //     });
  //   //     setTimeout("location.reload()",5000);
  //   alert("エラー");
  // }
  // mapper();
});

//mapget関数
function fuck() {
  newPostRef.on("child_added", function(data) {
    var z = data.val();
    var kk = data.key;
    usermap3 = z.usermap1;
    usermap4 = z.usermap2;
    console.log(usermap4 + "取得済");
  });
  // console.log(mapx);
  // console.log(usermap6);
    function mapsInit(position) {

          var fenway = {lat: usermap3, lng: usermap4};
          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);
    // }
}



</script>
<script async defer
    src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBykP3LGzhuVBBUDm59QpKWr43AZuqP1TI&callback=initialize">
</script>



</script>
</body>
</html>

```

エラー内容
```ここに言語を入力

simple.html:235 139.7197362取得済
4simple.html:235 undefined取得済
simple.html:209 到達してるよ
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:104
rg @ js?key=AIzaSyBykP3LGzhuVBBUDm59QpKWr43AZuqP1TI&callback=initialize:89
mapsInit @ simple.html:242
js?key=AIzaSyBykP3LGzhuVBBUDm59QpKWr43AZuqP1TI&callback=initialize:38 InvalidValueError: setPosition: not a LatLng or LatLngLiteral: in property lat: not a number
```
途中まで取得していても最終的にundefineとなる。
firebaseに渡したデータは取得できるが、mapの緯度経緯に代入するとうまく動作しない。
汚いエラーですが、アドバイスお願いします。

@@ -630,4 +630,4 @@
 firebaseに渡したデータは取得できるが、mapの緯度経緯に代入するとうまく動作しない。
-汚いエラーですが、アドバイスお願いします。
+汚いcodeですが、アドバイスお願いします。

質問編集履歴