---
metadata:
- name: generator
content: Diplodoc Platform v5.39.1
alternate:
- https://yandex.com.tr/dev/jsapi-v2-1/doc/en/v2-1/examples/cases/panorama_basics.md
- https://yandex.com.tr/dev/jsapi-v2-1/doc/ru/v2-1/examples/cases/panorama_basics.md
---
> **Documentation Index:** Fetch the complete configuration index at https://yandex.com.tr/dev/jsapi-v2-1/doc/en/llms.txt
# Inserting into the Yandex panoramas page
Open in CodeSandbox
The Yandex.Maps API allows you to display Yandex panoramas on website pages.
The panorama is implemented by Panorama. This object contains the necessary information
about the panorama: its name, geographical coordinates,connections to linked panoramas, and so on.
The panorama.Player object (the player) is used for adding a panorama
to a page. The player forms requests for tiles and creates the <canvas> element on the page for displaying the panorama. To insert a panorama on the page, just pass the player constructor the panorama object (Panorama).
You can use the panorama.locate function to get the panorama object. As input it is passed the geographical coordinates
of the point to get a panorama for. The function returns an array of panoramas found in the vicinity of this point.
The panoramas in the array are sorted by distance from the point.
You can also use the panorama.createPlayer function for adding panoramas to a web page. For input, it takes
the coordinates of the point where a panorama should be opened. The function searches for the nearest panorama and, if successful, it
creates a panorama player with the found panorama.
{% list tabs %}
- index.html
```html
Examples. Getting Yandex panoramas.
```
- panorama_basics.js
```js
ymaps.ready(function () {
// To begin with, we have to check whether the user's browser supports the panorama player.
if (!ymaps.panorama.isSupported()) {
// If it doesn't, we won't do anything.
return;
}
// Searching for a panorama at the point passed.
ymaps.panorama.locate([55.733685, 37.588264]).done(
function (panoramas) {
// Checking that at least one panorama was found.
if (panoramas.length > 0) {
// Creating the panorama player with one of the panoramas found.
var player = new ymaps.panorama.Player(
"player1",
/**
* The panoramas in the response are sorted by their distance
* from the point passed in 'panorama.locate'.
* We are choosing the first one because it will be the closest.
*/
panoramas[0],
/**
* Setting a viewing direction different
* from the default value.
*/
{ direction: [256, 16] }
);
}
},
function (error) {
// If something went wrong, we notify the user.
alert(error.message);
}
);
/**
* You can also use the 'panorama.createPlayer' method
* for adding panoramas to a page. This method searches for the nearest panorama
* and if successful, it creates a panorama player with the found panorama.
*/
ymaps.panorama
.createPlayer(
"player2",
[59.938557, 30.316198],
// Searching for an aerial panorama.
{ layer: "yandex#airPanorama" }
)
.done(function (player) {
// player – a link to the player instance.
});
});
```
{% endlist %}