wyświetlanie danych GPX w interfejsie API Google Maps - javascript, jquery, google-maps, google-maps-api-3, gpx

Mam duży problem. Chcę odzyskać moje dane GPX na mojej stronie, ale nie wiem, gdzie jest problem ...

Konsola Chrome mówi, że:

InvalidValueError: we ścieżce właściwości: o indeksie 0: not a LatLng lub LatLngLiteral: we właściwości lat: not a number

    google.load("visualization", "1", {packages: ["columnchart"]});

$.ajax({
url: "cartes/map.gpx",
type: "GET",
datatype: "xml",
success:function(xml){

var lat = new Array();
var lng = new Array();
var coordonneesMap = new Array();
var samples = 256;
var i = 0;

$(xml).find("trkpt").each(function(){
lat[i] = $(this).attr("lat");
lng[i] = $(this).attr("lon");

i++;
});

var maxPath = Math.round(lat.length / samples);
console.log(maxPath);
var path = [];

if ( maxPath > 1)
{
for(var i in lat)
{
if(( i %maxPath ) == 0) path.push({"lat":lat[i],"lng":lng[i]});
}
}

console.log(path)

var elevator = new google.maps.ElevationService;

elevator.getElevationAlongPath({
"path": path,
"samples": samples
}, plotElevation);


}
});

function plotElevation(elevations, status) {
var chartDiv = document.getElementById("elevation_chart");
if (status !== google.maps.ElevationStatus.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)"
});
}

Odpowiedzi:

Stwórz swój lat/lng wartości liczbowe:

$(xml).find("trkpt").each(function(){
lat[i] = parseFloat($(this).attr("lat"));
lng[i] = parseFloat($(this).attr("lon"));
i++;
});

Lub:

if(( i %maxPath ) == 0) path.push({"lat":parseFloat(lat[i]),"lng":parseFloat(lng[i])});