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

Question

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

Answer 1

Вот реализация jQuery.

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

В CSS:

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

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

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

Answer 2

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

Answer 3

На дом готов:

• Начальная карта и центр набора
• Получить текущий размер CSS для div, содержащего карту

При нажатии кнопки ввода в полноэкранном режиме:

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

При нажатии кнопки выхода из полноэкранного режима:

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

Вы можете найти код здесь

Answer 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();
}

Answer 5

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