Как добавить кнопку «Полноэкранный режим» на iframe с Яндекс-Картами?

Как можно добавить кнопку "развернуть на весь экран" в iframe, полученный после нажатия на кнопку "поделиться" на Яндекс.Картах?
  • 27 июня 2024 г. 12:52
Ответы на вопрос 3
Для добавления кнопки "Полноэкранный режим" на iframe с Яндекс-Картами можно использовать следующий код:

1. Создайте стандартный iframe с картой Яндекс:

```html
<iframe src="https://yandex.ru/maps/?ll=37.617635%2C55.755814&z=12&l=map&pt=37.622504%2C55.753215" width="600" height="400"></iframe>
```

2. Далее, добавьте кнопку "Полноэкранный режим" рядом с iframe:

```html
<button onclick="openFullscreen()">Полноэкранный режим</button>
```

3. Наконец, создайте JavaScript функцию для открытия карты в полноэкранном режиме:

```javascript
function openFullscreen() {
  var elem = document.querySelector('iframe');
  if (elem.requestFullscreen) {
    elem.requestFullscreen();
  } else if (elem.mozRequestFullScreen) { 
    elem.mozRequestFullScreen();
  } else if (elem.webkitRequestFullscreen) {
    elem.webkitRequestFullscreen();
  } else if (elem.msRequestFullscreen) {
    elem.msRequestFullscreen();
  }
}
```

Теперь при клике на кнопку "Полноэкранный режим" карта Яндекс будет отображаться на весь экран.

Чтобы добавить кнопку "развернуть на весь экран" к iframe, полученному после нажатия на кнопку "поделиться" на Яндекс.Картах, вам нужно добавить собственный код и использовать API карта Яндекс.

Пожалуйста, объясните, какой именно iframe и какие действия нужно совершить перед добавлением кнопки "развернуть на весь экран" для получения более конкретной помощи.
Здравствуйте! Я из Яндекса. Вы можете использовать Fullscreen API для реализации кнопки полноэкранного режима. Составил пример https://output.jsbin.com/tutalipoxo/1 : полноэкранный режим для карты включается при нажатии на кнопку «Развернуть на весь экран», посмотреть код вы можете по кнопке “Edit in JS Bin”.
не будет iframe разворачиваться на весь экран. Надо другой способ вставки карты использовать.
Похожие вопросы