Proper YAndex Maps API for panorama player

Using v2.1.39 Yandex Maps API to show player.

by Sergey Kruk

HTML

<script src="https://api-maps.yandex.ru/2.1/?lang=ru_RU&amp;load=package.full,panorama.isSupported,panorama.locate,panorama.createPlayer,panorama.Player"></script>
<body>
<div id="pano"></div>
<div id="map"></div>
</body>

CSS

html, body {
	margin: 0px;
	padding: 0px;
	width: 100%;
	height: 100%;
}

#pano {
	width: 100%;
	height: 65%;
}

#map {
	width: 100%;
	height: 35%;
}

JavaScript

var $map, $player, $marker;
var ll = [55.75074572, 37.61782676];

function markMapAt(latlng) {
	$marker.geometry.setCoordinates(latlng);
	$map.panTo(latlng);
}

ymaps.ready(function () {
	$map = new ymaps.Map('map', {center: ll, zoom: 15});
  $marker = new ymaps.Placemark(ll);
  $map.geoObjects.add($marker);
  if (ymaps.panorama.isSupported()) {
  	ymaps.panorama.locate(ll).done(function (panoramas) {
    	// I know there is one!
    	$player = new ymaps.panorama.Player('pano', panoramas[0]);
      $player.events.add('panoramachange', function (event) {
      	markMapAt(event.get('target').getPanorama().getPosition());
      });
    }, function (error) {
    	console.log(error)
    });
    $map.events.add('click', function (event) {
    	if ($player && $marker) {
      	var latlng = event.get('coords')
      	$player.moveTo(latlng).done(function () {
        	markMapAt(latlng);
        });
      }
    });
  } else {
		console.log('Yandex panorama is not supported!');
  }
});