Location from google elevation API are always NaN

Question

I do not understand how to retrieve the latitude and longitude of the result of google elevation.

Google returns me json like this:

{
   "results" : [
      {
         "elevation" : 1608.637939453125,
         "location" : {
            "lat" : 39.73915360,
            "lng" : -104.98470340
         },
         "resolution" : 4.771975994110107
      }
   ],
   "status" : "OK"
}

To have access to elevation I do elevations[0].location for example. (elevations is the JSON results).

For me to access the latitude I made elevations[0].location.lat, the problem is that I get function (){return a} I can't retrieve the latitude.

I would like to store the result in a vertex:

  var Vertex = function(x, y, z) {
      this.x = parseFloat(x);
      this.y = parseFloat(y);
      this.z = parseFloat(z);
  };

If I do that var vertex = new Vertex(elevations[0].location.lat, elevations[0].location.lng, elevations[0].elevation); x and y are always NaN why?

Answer 1

const lat1 = elevations[0].location.lat();
const lng1 = elevations[0].location.lng();

The above two lines did the trick for me.

Answer 2

Per the documentation:

location Type: LatLng

The location of this elevation result.

The coordinates in the result from the Google Maps Javascript API v3 elevations service are google.maps.LatLng objects.

To access the latitude and longitude values call the appropriate function (.lat() for latitude, .lng() for longitude):

var vertex = new Vertex(elevations[0].location.lat(), 
                        elevations[0].location.lng(), 
                        elevations[0].elevation);

fiddle

code snippet:

// Takes an array of ElevationResult objects, draws the path on the map
// and plots the elevation profile on a Visualization API ColumnChart.
function plotElevation(elevations, status) {
  for (var i = 0; i < elevations.length; i++) {
    var marker = new google.maps.Marker({
      position: elevations[i].location,
      map: map,
      icon: {
        url: "https://maps.gstatic.com/intl/en_us/mapfiles/markers2/measle.png",
        size: new google.maps.Size(7, 7),
        anchor: new google.maps.Point(3.5, 3.5)
      },
      title: "" + elevations[i].elevation.toFixed(2) + ",lat:" + elevations[i].location.lat().toFixed(4) + ",lng:" + elevations[i].location.lng().toFixed(4)
    })
  }
  var chartDiv = document.getElementById('elevation_chart');
  if (status !== 'OK') {
    // Show the error code inside the chartDiv.
    chartDiv.innerHTML = 'Cannot show elevation: request failed because ' +
      status;
    return;
  }
  // Create a new chart in the elevation_chart DIV.
  var chart = new google.visualization.ColumnChart(chartDiv);

  // Extract the data from which to populate the chart.
  // Because the samples are equidistant, the 'Sample'
  // column here does double duty as distance along the
  // X axis.
  var data = new google.visualization.DataTable();
  data.addColumn('string', 'Sample');
  data.addColumn('number', 'Elevation');
  for (var i = 0; i < elevations.length; i++) {
    data.addRow(['', elevations[i].elevation]);
  }

  // Draw the chart using the data within its DIV.
  chart.draw(data, {
    height: 150,
    legend: 'none',
    titleY: 'Elevation (m)'
  });
}

// Load the Visualization API and the columnchart package.
google.load('visualization', '1', {
  packages: ['columnchart']
});
var map;

function initMap() {
  map = new google.maps.Map(document.getElementById('map'), {
    zoom: 8,
    center: path[1],
    mapTypeId: 'terrain'
  });

  // Create an ElevationService.
  var elevator = new google.maps.ElevationService;

  // Draw the path, using the Visualization API and the Elevation service.
  displayPathElevation(path, elevator, map);
}

function displayPathElevation(path, elevator, map) {
  // Display a polyline of the elevation path.
  new google.maps.Polyline({
    path: path,
    strokeColor: '#0000CC',
    strokeOpacity: 0.4,
    map: map
  });

  // Create a PathElevationRequest object using this array.
  // Ask for 256 samples along that path.
  // Initiate the path request.
  elevator.getElevationAlongPath({
    'path': path,
    'samples': 256
  }, plotElevation);
}

// The following path marks a path from Mt. Whitney, the highest point in the
// continental United States to Badwater, Death Valley, the lowest point.
var path = [{
    lat: 36.579,
    lng: -118.292
  }, // Mt. Whitney
  {
    lat: 36.606,
    lng: -118.0638
  }, // Lone Pine
  {
    lat: 36.433,
    lng: -117.951
  }, // Owens Lake
  {
    lat: 36.588,
    lng: -116.943
  }, // Beatty Junction
  {
    lat: 36.34,
    lng: -117.468
  }, // Panama Mint Springs
  {
    lat: 36.24,
    lng: -116.832
  }
]; // Badwater, Death Valley

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

<div>
  <div id="map" style="height:250px;"></div>
  <div id="elevation_chart"></div>
</div>
<script src="https://www.google.com/jsapi"></script>

<!-- Replace the value of the key parameter with your own API key. -->
<script async defer src="https://maps.googleapis.com/maps/api/js?callback=initMap">
</script>