javascript - marcadores - google.maps.marker example

¿Cómo creo un botón mostrar pantalla completa para alternar mi página de google maps para que sea pantalla completa?

Question

Hola chicos, tengo un mapa de google integrado en una parte de mi página y me gustaría crear un botón de alternar para alternar el mapa entre pantalla completa y tamaño normal. Por lo tanto, cuando hace clic en él, el mapa se extiende para llenar toda la pantalla del navegador y hacer clic nuevamente en él para recuperar su tamaño original en la página. ¿Cómo lo haría?

Answer 1

Ahora tenemos una API de pantalla completa https://developer.mozilla.org/en/DOM/Using_full-screen_mode , solo debes seleccionar el elemento DOM que deseas establecer en pantalla completa y llamar a la API de pantalla completa. Algo como esto

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

Answer 2

Aquí hay una implementación jQuery.

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

En el CSS:

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

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

No probado, pero algo en la línea de eso debería funcionar.

Answer 3

al hacer clic tienes que cambiar el tamaño de tu div donde has mostrado el mapa ... creo que es simple

Answer 4

En Dom listo:

• Mapa inicial y centro establecido
• Obtenga el tamaño actual de CSS del div que contiene el mapa

Al presionar Enter-fullscreen-button, haga clic en:

• Actualice el CSS (tamaño y posición)
• Activar el método del mapa de cambio de tamaño
• Establecer el centro del mapa

Al salir, botón de pantalla completa, haga clic en:

• Actualice el CSS (de vuelta al tamaño y posición inicial)
• Activar el método del mapa de cambio de tamaño
• Establecer el centro del mapa

Puedes encontrar el código aquí

Answer 5

Si tiene un mapa en su página, todo lo que necesita hacer es escribir algunos javascript para cambiar el tamaño del DIV que contiene el mapa. No he implementado un ejemplo que cambie el tamaño del DIV para llenar el navegador, pero aquí hay uno que alterna el tamaño de un mapa div de javascript (yo uso mooTools para establecer style.width en el elemento, pero puede usar lo que sea que prefieren manipular el DOM).