Добавление адресов в таблицу из геокодирования Google-Api в JavaScript

Question

Я пытаюсь создать систему родительского контроля, которая позволяет родителю следить за историей его дочерних расположений в WebService.

У меня есть мобильное приложение, которое отправляет местоположения в базу данных в реальном времени в Google Firebase. Эти местоположения (широта и долгота) отправляются из Firebase в мой код Javascript, где я хочу поместить их в таблицу в моем HTML. Я не хочу помещать в таблицу долготу и широту, но вместо этого я хочу сохранить адреса, основанные на этих местоположениях. Вот почему я использовал Google Geolocations API. Проблема в том, что когда я устанавливаю эти адреса в переменную, которую я хочу поместить в таблицу, эта переменная оказывается неопределенной. Я думаю, что это может быть проблемой с областью действия этой переменной, но я не могу справиться с этим. Заранее спасибо за помощь. Я поставил свой код JS ниже:

var longitude;
var latitude;
var address;

//GETING DATA FROM FIREBASE
$(document).ready(function(){
    var rootRef = firebase.database().ref().child("locations");
    rootRef.on("child_added", snap => {
        time = snap.child("time").val();
        longitude = snap.child("longitude").val();
        latitude = snap.child("latitude").val();

        latitude = parseFloat(latitude);
        longitude = parseFloat(longitude);

        //CONVERTING LATITUDE AND LONGITUDE INTO ADDRESS

        var geocoder = new google.maps.Geocoder();
        var location = new google.maps.LatLng(latitude, longitude);
        geocoder.geocode({'latLng': location}, function (results, status) {
            if (status == google.maps.GeocoderStatus.OK) {
                address = results[0].formatted_address;
                //HERE ADDRESS IS DISPLAYING GOOD
            }
        });

        //PUT ADDRESS INTO TABLE (THERE IS PROBLEM - ADDRESS IS Undefined)

        $("#table_body").append("<tr><td>" + time + "</td><td>" + address + "</td><td>");
    })
})

Answer 1

Геокодер асинхронный. Вам необходимо использовать данные в функции обратного вызова, когда / где они доступны. Если вы хотите, чтобы переменные из цикла в подпрограмме обратного вызова, вам нужно захватить их с закрытием функции:

var longitude;
var latitude;
var address;

//GETING DATA FROM FIREBASE
$(document).ready(function(){
    var rootRef = firebase.database().ref().child("locations");
    rootRef.on("child_added", snap => {
      time = item.time;
      longitude = item.longitude;
      latitude = item.latitude;

      latitude = parseFloat(latitude);
      longitude = parseFloat(longitude);

      //CONVERTING LATITUDE AND LONGITUDE INTO ADDRESS

      var geocoder = new google.maps.Geocoder();
      var location = new google.maps.LatLng(latitude, longitude);
      geocoder.geocode({
        'latLng': location
      }, (function(time) {  // function closure on the "time" variable
        return function(results, status) {
        if (status == google.maps.GeocoderStatus.OK) {
          address = results[0].formatted_address;
          //HERE ADDRESS IS DISPLAYING GOOD
          //PUT ADDRESS INTO TABLE (THERE IS PROBLEM - ADDRESS IS Undefined)
          var marker = new google.maps.Marker({
            map: map,
            position: results[0].geometry.location
          });
          bounds.extend(marker.getPosition());
          map.fitBounds(bounds);
          $("#table_body").append("<tr><td>" + time + "</td><td>" + address + "</td><td>");
        }
      }}(time)));
    })
  })
}

подтверждение концепции скрипки

фрагмент кода:

var testData = [{
    time: "2019-01-01 12:00:00",
    latitude: 40.7484405,
    longitude: -73.9856644
  },
  {
    time: "2019-01-01 12:10:00",
    latitude: 40.6892494,
    longitude: -74.0445004
  }
]

function initMap() {
  var map = new google.maps.Map(document.getElementById('map'), {
    zoom: 8,
    center: {
      lat: -34.397,
      lng: 150.644
    }
  });
  var geocoder = new google.maps.Geocoder();

  var longitude;
  var latitude;
  var address;

  //GETING DATA FROM FIREBASE
  $(document).ready(function() {
    var bounds = new google.maps.LatLngBounds();
    testData.forEach(function(item, i) {
      time = item.time;
      longitude = item.longitude;
      latitude = item.latitude;

      latitude = parseFloat(latitude);
      longitude = parseFloat(longitude);

      //CONVERTING LATITUDE AND LONGITUDE INTO ADDRESS

      var geocoder = new google.maps.Geocoder();
      var location = new google.maps.LatLng(latitude, longitude);
      geocoder.geocode({
        'latLng': location
      }, (function(time) {
        return function(results, status) {
        if (status == google.maps.GeocoderStatus.OK) {
          address = results[0].formatted_address;
          //HERE ADDRESS IS DISPLAYING GOOD
          //PUT ADDRESS INTO TABLE (THERE IS PROBLEM - ADDRESS IS Undefined)
          var marker = new google.maps.Marker({
            map: map,
            position: results[0].geometry.location
          });
          bounds.extend(marker.getPosition());
          map.fitBounds(bounds);
          $("#table_body").append("<tr><td>" + time + "</td><td>" + address + "</td><td>");
        }
      }}(time)));
    })
  })
}

function geocodeAddress(geocoder, resultsMap) {
  var address = document.getElementById('address').value;
  geocoder.geocode({
    'address': address
  }, function(results, status) {
    if (status === 'OK') {
      resultsMap.setCenter(results[0].geometry.location);
      var marker = new google.maps.Marker({
        map: resultsMap,
        position: results[0].geometry.location
      });
    } else {
      alert('Geocode was not successful for the following reason: ' + status);
    }
  });
}

#map {
  height: 80%;
}

html,
body {
  height: 100%;
  margin: 0;
  padding: 0;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="map"></div>
<div id="table">
  <table id="table_body">
  </table>
</div>
<!-- Replace the value of the key parameter with your own API key. -->
<script async defer src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk&callback=initMap"></script>

Answer 2

Попробуйте переместить jQuery.append() в условное выражение:

coder.geocode({'latLng': location}, function (results, status) {
  if (status == google.maps.GeocoderStatus.OK) {
    var tempAddress = results[0].formatted_address;
    $("#table_body").append("<tr><td>" + time + "</td><td>" + tempAddress + "</td><td>");
  }
});