С выходом нового API 2.x Яндекс.Карт вывод трека в формате gpx на карту стал очень простым. Теперь не надо регистрироваться, не нужен API key.
Итак, нам понадобится, собственно, сам трек и несколько строк кода. Я скачал трек из Интернета (называется он 3941.gpx), положил его в папку и в ней же создал файл index.html со следующим содержимым:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Примеры. Загрузка XML.</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<script src="http://api-maps.yandex.ru/2.0/?load=package.full&amp;amp;lang=ru-RU"
type="text/javascript"></script>
<script type="text/javascript">
ymaps.ready(init);
function init () {
var myMap = new ymaps.Map("map", {
center: [52.646573, 39.519488],
zoom: 9
});
ymaps.geoXml.load('3941.gpx')
.then(function (res) {
myMap.geoObjects.add(res.geoObjects);
});
}
</script>
</head>
<body>
<h1>Вывод gpx трека на карту Яндекса</h1>
<div id="map" style="width: 800px; height: 600px"></div>
</body>
</html>
В строке 10 создается новая карта, центр которой имеет координаты 52.646573, 39.519488, а масштаб равен 9. Координаты центра карты легко узнать, зная где проходит трек. Мой трек проходит к северо-западу от Липецка. Заходим на Яндекс.Карты, выбираем инструмент «Получить информацию»
и кликаем по любой точке, которая находится рядом с нашим треком:
Слева от карты видим координаты выбранной точки — вот их мы и указываем в строке 10
center: [52.646573, 39.519488]
Обратите внимание — сначала указывается широта, потом долгота.
В 14-й строке мы загружаем наш трек и выводим его на карту. В итоге получилась вот такая картина — пример вывода gpx трека на карту
Уверен, что процедура нахождения центра карты для вывода трека вас не очень обрадовала, поэтому далее мы сделаем так, чтобы трек выводился автоматически. Т. е. масштаб и расположение трека на карте сделает сам API Яндекса. Измененный index.html будет выглядеть вот так:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Примеры. Загрузка XML.</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<script src="http://api-maps.yandex.ru/2.0/?load=package.full&amp;lang=ru-RU"
type="text/javascript"></script>
<script type="text/javascript">
ymaps.ready(init);
function init () {
var myMap = new ymaps.Map("map", {
center: [52.646573, 39.519488],
zoom: 9
});
ymaps.geoXml.load('3941.gpx')
.then(function (res) {
res.geoObjects.options.set({
balloonContentBodyLayout: ymaps.templateLayoutFactory.createClass(
'$[properties.velocity]'
)
});
myMap.geoObjects.add(res.geoObjects);
if (res.geoObjects.properties.get('boundedBy')) {
myMap.setBounds(res.geoObjects.properties.get('boundedBy'), {
checkZoomRange: true
});
}
});
}
</script>
</head>
<body>
<h1>Вывод gpx трека на карту Яндекса</h1>
<div id="map" style="width: 800px; height: 600px"></div>
</body>
</html>
А итоговый вариант вот так — вывод gpx трека на Яндекс.Карты





