¿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

Aquí hay una aplicación de 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 que debería funcionar.

Answer 2

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 here es 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 cualquier prefieren manipular el DOM).

Answer 3

en tecleo usted tiene que cambiar el tamaño del div donde se tiene mostrar el mapa ..... Creo que su simple

Answer 4

sobre el Dom listo:

• la correspondencia y del centro de Init
• obtener el tamaño actual de CSS del div que contiene el mapa

En enter-pantalla completa-clic de botón:

• Actualice el CSS (tamaño y posición)
• Disparador el método de mapa de cambio de tamaño
• central SET mapa

on-pantalla completa botón click salida:

• actualización de la CSS (vuelta al tamaño inicial y la posición)
• Gatillo el método de mapa de cambio de tamaño
• Conjunto centro del mapa

puede encontrar el código here

Answer 5

Ahora tenemos una API de pantalla completa https://developer.mozilla.org/en/DOM/Using_full-screen_mode que solo selecciona el elemento DOM que desea establecer en pantalla completa y llama a la API de pantalla completa en él. 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(); 
}