Как создать полноэкранную кнопку show для переключения моей страницы карт Google на полноэкранный режим?

Привет, ребята У меня есть карта google, интегрированная на моей странице, и я хотел бы создать кнопку переключения, чтобы переключать карту между полноэкранным и нормальным размером. Поэтому, когда вы нажимаете на нее - карта распространяется, чтобы заполнить весь экран браузера и снова щелкнуть по нему, она восстанавливается до исходного размера на странице. Как мне это сделать?

Ответы

Ответ 1

Здесь выполняется реализация jQuery.

$("#map_toggler").click(function() {
  $("#map").toggleClass("fullscreen")
});

В CSS:

#map {
  width: 400px;
  height: 200px;
}

#map.fullscreen {
  position: fixed;
  width:100%;
  height: 100%;
}

Неподтвержденный, но что-то вроде этого должно работать.

Ответ 2

Если у вас есть карта на вашей странице, все, что вам нужно сделать, это написать javascript, чтобы изменить размер DIV, который содержит карту. Я не реализовал пример, который изменяет размер DIV для заполнения браузера, но здесь - это тот, который переключает размер карты div из javascript (Я использую mooTools для установки style.width для элемента, но вы можете использовать все, что хотите, чтобы манипулировать DOM).

Ответ 3

В режиме "Дом":

  • Инициировать карту и установить центр.
  • Получить текущий размер CSS div, содержащий карту

На кнопке enter-fullscreen нажмите:

  • Обновить CSS (размер и положение)
  • Запустите метод изменения размера.
  • Установить центр карты

На экране exit-fullscreen нажмите кнопку:

  • Обновление CSS (возврат к исходному размеру и позиции)
  • Запустите метод изменения размера.
  • Установить центр карты

Здесь вы можете найти код

Ответ 4

Теперь у нас есть полноэкранный API https://developer.mozilla.org/en/DOM/Using_full-screen_mode, вы просто выбираете элемент DOM, который хотите установить в полноэкранный режим, и вызывать полноэкранный API на нем, Что-то вроде этого

var elem = document.getElementById("myvideo");
if (elem.requestFullScreen) {
  elem.requestFullScreen();
} else if (elem.mozRequestFullScreen) {
  elem.mozRequestFullScreen();
} else if (elem.webkitRequestFullScreen) {
  elem.webkitRequestFullScreen();
}

Ответ 5

при нажатии вы должны изменить размер своего div, где вы показываете карту..... я думаю, что ее простая