Poczekaj na oddzwonienie żądania usługi podniesienia uprawnień - javascript, google-mapy, google-mapy-api-3

Próbuję zbudować małą aplikację z Google Map API, a ponieważ jest to moja pierwsza aplikacja javascript (już wiem o języku, ale prawie nigdy go nie używam), mam problem z małym problemem.

Próbuję uzyskać powiązanie wysokości zmarker, używając ElevationService, w celu wypchnięcia dwóch danych ({marker, elevation}) do tablicy. Jednak linia, w której wypycham dane do tablicy, zostaje trafiona przed funkcją wywołania zwrotnego getElevationForLocations został wywołany, co powoduje wypchnięcie niezdefiniowanych danych (rzędnych).

Myślę, że powinienem użyć funkcji asynchronicznej, aby poczekać na wykonanie wywołania zwrotnego przed wypchnięciem danych, ale nie wiem, jak z niego korzystać.

Czy ktoś mógłby dać mi wskazówki na ten temat?

Wielkie dzięki, Méta

P.S .: Oto mój skrypt

    var markers = [];

function initMap()
{
var map = new google.maps.Map(document.getElementById("map"), {
zoom: 4,
center: {lat: -25.363882, lng: 131.044922 },
mapTypeId: "terrain"
});

var elevator = new google.maps.ElevationService;

map.addListener("click", function(e) {
addMarker(e.latLng, map, elevator);
});
}

function getElevation(location, elevator) {
var elevation;
// Initiate the location request
elevator.getElevationForLocations({
"locations": [location]
}, function(results, status)
{
if (status === "OK") {
// Retrieve the first result
if (results[0]) {
return results[0].elevation;
}
}
});
}

function placeMarkerAndPanTo(latLng, map) {
var marker = new google.maps.Marker({
position: latLng,
map: map
});
map.panTo(latLng);
return marker;
//markers.push(marker);
}

function addMarker(location, map, elevator)
{   var marker = placeMarkerAndPanTo(location, map);
var elevation = getElevation(location, elevator);

markers.push({marker, elevation});
}

Odpowiedzi:

Oto uproszczona wersja twojego kodu, wykorzystująca to, co opisałem w moim komentarzu.

var markers = [];
var elevator = new google.maps.ElevationService;
var map;

function initMap() {

map = new google.maps.Map(document.getElementById("map"), {
zoom: 4,
center: {
lat: -25.363882,
lng: 131.044922
},
mapTypeId: "terrain"
});

map.addListener("click", function(e) {
addMarker(e.latLng);
});
}

function addMarker(location) {

elevator.getElevationForLocations({
"locations": [location]
}, function(results, status) {
if (status === "OK") {

// Retrieve the first result
if (results[0]) {

var marker = new google.maps.Marker({
position: location,
map: map
});

map.panTo(location);

markers.push({
marker: marker,
elevation: results[0].elevation
});

console.log(markers);
}
}
});
}

google.maps.event.addDomListener(window, "load", initMap);

#map {
height: 200px;
}

<script src="//maps.googleapis.com/maps/api/js"></script>

<div id="map"></div>

Edytować: Wygląda na to, że w tej chwili wystąpił problem z ładowaniem interfejsu API z fragmentu kodu (przynajmniej dla mnie powoduje awarię przeglądarki), więc tutaj działa JSFiddle także.