indexmap.js：32未捕获的TypeError：无法读取未定义的属性“地理编码”

Question

我试图让第一个功能（getLocation）在第二个功能（refresh）之前运行。我已经尝试过回调，但未能成功。因此，我试图使用setInterval运行这些函数。

第一个函数将允许我从当前位置获取lat和lng，第二个函数将转换lat和lng并在其上显示地图。如果我发送垃圾邮件，请单击“尝试”按钮以使页面加载lat和lng，第二个功能将正常运行并提供我的地址。但是，如果我使用setInterval来获取lat和lng，则第二个函数将在控制台中显示Uncaught type error, geocode undefined。下面是我尝试过的：

https://jsfiddle.net/berwyn/o489wvka/3/

function getLocation() {
  if (navigator.geolocation) {
    navigator.geolocation.getCurrentPosition(showPosition);
  }
}

function showPosition(position) {
  latField = document.getElementById("Lat");
  lngField = document.getElementById("Lng");
  latField.value = position.coords.latitude;
  lngField.value = position.coords.longitude;
}

function initMap() {

  var geocoder = new google.maps.Geocoder();
  var infowindow = new google.maps.InfoWindow;

  myAddress = document.getElementById("address");

  window.onload = function() {
    setTimeout(refresh(geocoder, map, infowindow), 10000)
  };

  setInterval(getLocation, 2000);

  function refresh(geocoder, map, infowindow) {

    var latlng = {
      lat: parseFloat(document.getElementById('Lat').value),
      lng: parseFloat(document.getElementById('Lng').value)
    };
    geocoder.geocode({
      'location': latlng
    }, function(results, status) {
      if (status === 'OK') {
        if (results[0]) {
          map.setZoom(15);
          var marker = new google.maps.Marker({
            position: latlng,
            map: map,
            icon: 'http://localhost/img/car.png',
          });
          infowindow.setContent(results[0].formatted_address);
          infowindow.open(map, marker);

          myAddress.innerHTML = "Address: " + results[0].formatted_address;
          document.getElementById('origin-input').value = results[0].formatted_address;
        } else {
          window.alert('No results found');
        }
      } else {
        window.alert('Geocoder failed due to: ' + status);
      }
    });

    alert('Updated Location');
  }
  setInterval(refresh, 5000);


  var directionsDisplay = new google.maps.DirectionsRenderer;
  var directionsService = new google.maps.DirectionsService;
  var map = new google.maps.Map(document.getElementById('map'), {
    mapTypeControl: false,
    center: {
      lat: 1.317206,
      lng: 103.772240
    },
    zoom: 13
  });

  new AutocompleteDirectionsHandler(map);
  directionsDisplay.setMap(map);
  directionsDisplay.setPanel(document.getElementById('right-panel'));

  var onChangeHandler = function() {
    calculateAndDisplayRoute(directionsService, directionsDisplay);
  };

  document.getElementById('destination-input').addEventListener('change', onChangeHandler);
}

<meta name="viewport" content="initial-scale=1.0, user-scalable=no">

<link rel="stylesheet" href="css/index.css">
<script src="js/indexmap.js"></script>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<button onclick="getLocation()">Try It</button>

<br/>
<center> LAT : <input id="Lat" value="    "></center><br/>


<br/>
<center> LNG : <input id="Lng" value="    "></center><br/>

<center>
  <p style="font-size:20px;" id="address"></p>
</center>

<input id="origin-input" class="controls" type="text" placeholder="Enter an origin location">

<input id="destination-input" class="controls" type="text" placeholder="Enter a destination location">
<div id="map"></div>


<script src="https://maps.googleapis.com/maps/api/js?key='RemovedMyAPI'&libraries=places&callback=initMap" async defer></script>