Mostrar/Ocultar

 ¿Como maximizar el div que contiene el plugin? 🗺️ Foro Programación de Google Earth y Maps 🗺️ p32 🗺️


Foro de Programación de Google Earth y Maps  Foro de Programación de Google Earth y Maps: Programación con las APIs de Google: Google Earth, Google Maps, KML, Aplicaciones Moviles
Responder al tema Versión Imprimible
Página 1 de 1 - Tema con 7 Mensajes y 9307 Lecturas
Último Mensaje:
Foro de Programación de Google Earth y Maps Ver más mensajes sobre ¿Como maximizar el div que contiene el plugin? en el foro
Autor Mensaje

_polifemo
SuperExpert
SuperExpert
Registrado:27-11-2009
Mensajes: 436

Votos: 0 👍

EnlacesAsunto: Re: ¿Como maximizar el div que contiene el plugin?

Publicado:
Responder citando
Amigo Morta, eres un virguero Guiño

Llevo un rato mirando, pero no encuentro el modo... Googleando he encontrado una página que usa jquery:

jqueryui.com/ ...fault.html

Lo curioso es que el evento que desencadene el cambio de tamaño del no aparece (y la página no tiene mas de 40 líneas de código tabuladas).

Parece que el truco está en en este script:

jqueryui.com/ ...sizable.js

Pero no consigo averiguar nada Trist
Ir arriba _polifemo
Compartir:

_polifemo
SuperExpert
SuperExpert
Registrado:27-11-2009
Mensajes: 436

Votos: 0 👍

EnlacesAsunto: Re: ¿Como maximizar el div que contiene el plugin?

Publicado:
Responder citando
Veamos este ejemplo:

www.csun.edu/ ...Review.htm

Parece que en la misma página tenemos dos contenedores, uno para full screen y el otro para pantalla normal.

Code::
<div id="fullscreencontainer" style="position: absolute; width: 98.5%; height: 98%;"></div>

<div id="sizecontainer" style="position: absolute; width: 748px; height: 500px;"></div>

Tienes también las funciones :

createFullScreenIcon()
CreateNormalScreenIcon()
MakeFullScreen()
MakeNormalScreen()


Y parece que lo que hacen las dos últimas funciones es simplemente jugar con la visibilidad de ambos contenedores, incluso diría que solo con la de la ventana mayor. De hecho, si sacas el código fuente de la página con el contenedor maximizado y con el contenedor minimizado, el código es el mismo... Ergo son la misma página.

¿Me hago entender? Muy feliz .

Yo creo que en esta página tienes lo que necesitas, ahora solo te faltan un par de tardes entretenido.

Un saludo y ya nos cuentas. Guiño
Ir arriba _polifemo
Compartir:

Morta
Veterano
Veterano
Registrado:09-10-2008
Mensajes: 64

Votos: 0 👍

EnlacesAsunto: Re: ¿Como maximizar el div que contiene el plugin?

Publicado:
Responder citando
Hola Polifemo
Te ha gustado ¿eh?
Lástima que el manual de la Api de Google Earth sea tan escueto en cuanto a ejemplos de lo que se puede hacer.. Seguro que se pueden hacer muchísimas cosas mas. Creo que ya hemos comentado alguna vez sobre lo poco claro y "raro" que resulta ese manual, al menos para mi.
Por cierto, muy interesante también la página con el codigo jquery para redimensionar el div

Bueno, creo que algo he conseguido a base de eliminar el código sobrante de la página que indicabas y dejando solo el efecto de maximizar el contenedor de la imagen

Un saludo y muchas gracias por tu ayuda

Ahí va (quizá le sobre algo, pero así funciona)



Code::
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<!--http://www.csun.edu/~centergs/API/Ballona_HE_Review.htm-->

<html>

<head>

<title>PRUEBA MAXIMIZAR PLUGIN</title>
<meta name="author" content="Eric  Meyers_EricCMeyers@yahoo.com">
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<script src="http://www.google.com/jsapi?key=**KEY**"></script>
<script type="text/javascript">
      
      function addSampleUIHtml(html) {
        document.getElementById('sample-ui').innerHTML += html;
      }   
      
        var ge;
        var fullScreenState = false;
        var noFullScreenIcon = null;
        var fullScreenIcon = null;
      
            existingChild = null;
    
        google.load("earth", "1");
        google.load("maps", "2");

      function init() {
        var content = document.getElementById('content');
        google.earth.createInstance('content', initCallback, failureCallback);
      }
 
      function initCallback(instance) {
        ge = instance;
        ge.getWindow().setVisibility(true);
        ge.getNavigationControl().setVisibility(ge.VISIBILITY_SHOW);
        ge.getLayerRoot().enableLayerById(ge.LAYER_BORDERS, true);
        ge.getOptions().setScaleLegendVisibility(true);
        ge.getOptions().setStatusBarVisibility(true);
        ge.getLayerRoot().enableLayerById(ge.LAYER_TERRAIN, true);
        
        createFullScreenIcon();
        createNormalScreenIcon();
        google.earth.addEventListener(ge.getWindow(), "click", handleMouseClick);

        var mugu1 = ge.createLookAt('');
        /* VIEW OF EARTH */
        mugu1.set(33.9423, -118.2653,
        60000, /* ALT */
        ge.ALTITUDE_RELATIVE_TO_GROUND,
        0, /* HEAD */
        0, /* TILT */
        40000 /* RANGE */
      );
        ge.getOptions().setFlyToSpeed(0.5);      
        ge.getView().setAbstractView(mugu1);
      }
    
      function failureCallback(errorCode) {
      }
      
    
      function handleMouseClick(event){
        var INSET_PIXELS_X = document.getElementById("content").offsetWidth - event.getClientX();
        var INSET_PIXELS_Y = event.getClientY();
        if (INSET_PIXELS_X < 32){
          if (INSET_PIXELS_Y < 32){ toggleFullScreen();}
      }
      }

      function toggleFullScreen(){
        if (fullScreenState == true) {makeNormalScreen();}
        else {makeFullScreen();}
      }

      function makeFullScreen(){
        var samplecontainer = document.getElementById('fullscreencontainer');
        var container = document.getElementById('content');
        container.style.left = 0; 
        container.style.top = 0;
        container.style.width = samplecontainer.offsetWidth + 'px'; 
        container.style.height = samplecontainer.offsetHeight + 'px';
        fullScreenState = true;
        noFullScreenIcon.setVisibility(fullScreenState);
        fullScreenIcon.setVisibility(!fullScreenState);  
      }

      function makeNormalScreen(){
        var samplecontainer = document.getElementById('sizecontainer');
        var container = document.getElementById('content');
        container.style.left = samplecontainer.style.left; 
        container.style.top = samplecontainer.style.top;
        container.style.width = samplecontainer.offsetWidth + 'px'; 
        container.style.height = samplecontainer.offsetHeight + 'px';
        fullScreenState = false;
        noFullScreenIcon.setVisibility(fullScreenState);
        fullScreenIcon.setVisibility(!fullScreenState);
      }

      function createFullScreenIcon() {
        /* create an image for the screen overlay */
        var icon = ge.createIcon('');
        icon.setHref('http://earth-api-samples.googlecode.com/svn/trunk/external/dinther_fullscreen_tofull.png');
        /* create the screen overlay */
        fullScreenIcon = ge.createScreenOverlay('');
        fullScreenIcon.setDrawOrder(60);
        fullScreenIcon.setIcon(icon);
        /* anchor point in top left of icon. */
        fullScreenIcon.getScreenXY().setXUnits(ge.UNITS_FRACTION);
        fullScreenIcon.getScreenXY().setYUnits(ge.UNITS_FRACTION);
        fullScreenIcon.getScreenXY().setX(1);
        fullScreenIcon.getScreenXY().setY(1);
        /* place icon in top left of screen. */
        fullScreenIcon.getOverlayXY().setXUnits(ge.UNITS_INSET_PIXELS);
        fullScreenIcon.getOverlayXY().setYUnits(ge.UNITS_INSET_PIXELS);
        fullScreenIcon.getOverlayXY().setX(2);
        fullScreenIcon.getOverlayXY().setY(4);
        /* Set icon size. */
        fullScreenIcon.getSize().setXUnits(ge.UNITS_PIXELS);
        fullScreenIcon.getSize().setYUnits(ge.UNITS_PIXELS);
        fullScreenIcon.getSize().setY(32);
        fullScreenIcon.getSize().setX(32);
        /* add the screen overlay to Earth */
        ge.getFeatures().appendChild(fullScreenIcon);
      }

      function createNormalScreenIcon() {
        /* create an image for the screen overlay */
        var icon = ge.createIcon('');
        icon.setHref('http://earth-api-samples.googlecode.com/svn/trunk/external/dinther_fullscreen_tonormal.png');
        /* create the screen overlay */
        noFullScreenIcon = ge.createScreenOverlay('');
        noFullScreenIcon.setDrawOrder(62);
        noFullScreenIcon.setIcon(icon);
        /* anchor point in top left of icon. */
        noFullScreenIcon.getScreenXY().setXUnits(ge.UNITS_FRACTION);
        noFullScreenIcon.getScreenXY().setYUnits(ge.UNITS_FRACTION);
        noFullScreenIcon.getScreenXY().setX(1);
        noFullScreenIcon.getScreenXY().setY(1);
        /* place icon in top right of screen. */
        noFullScreenIcon.getOverlayXY().setXUnits(ge.UNITS_INSET_PIXELS);
        noFullScreenIcon.getOverlayXY().setYUnits(ge.UNITS_INSET_PIXELS);
        noFullScreenIcon.getOverlayXY().setX(2);
        noFullScreenIcon.getOverlayXY().setY(4);
        /* Set icon size. */
        noFullScreenIcon.getSize().setXUnits(ge.UNITS_PIXELS);
        noFullScreenIcon.getSize().setYUnits(ge.UNITS_PIXELS);
        noFullScreenIcon.getSize().setY(32);
        noFullScreenIcon.getSize().setX(32);
        noFullScreenIcon.setVisibility(false);
        /* add the screen overlay to Earth */
        ge.getFeatures().appendChild(noFullScreenIcon);
      }

      function handleFullScreen(){
        if (window.innerWidth == screen.width){
          if (window.innerHeight > screen.height - 10){
            /*this is likely caused by pressing F11 on the browser */
            makeFullScreen();
      } 
          else if (fullScreenState == true) { makeNormalScreen();}
      } 
      else {makeNormalScreen();}
      }
Google.setOnLoadCallback(init);
</script> 

<style type="text/css">
.tool
{
Position:relative;
Left:350px;
}
.legend
{
Position:relative;
Left:30px;
}
</style> 
      
</head>

<body bgcolor="#FFFFFF" text="#000000 onresize="handleFullScreen();">
<font color="#000000" size=+2 face="corbel"><b>Pulsando en el icono de la esquina superior derecha la imagen se maximiza</b></font>

<br>

<div class="tool">
<font color="#000000" size=-1><i>Click on the <img src="http://earth-api-samples.googlecode.com/svn/trunk/external/dinther_fullscreen_tofull.png"/> to toggle full browser mode or press F11 for full screen.</i></font>
</div>

<div style="clear: both;"></div>

<div id="fullscreencontainer" style="position: absolute; width: 98.5%; height: 98%;"></div>

<div id="sizecontainer" style="position: absolute; width: 748px; height: 500px;"></div>

<div id="content" style="position: absolute; border: 5px solid  #585858; width: 748px; height: 500px;"></div>

</body>

</html>
Ir arriba Morta
Compartir:

Morta
Veterano
Veterano
Registrado:09-10-2008
Mensajes: 64

Votos: 0 👍

EnlacesAsunto: Re: ¿Como maximizar el div que contiene el plugin?

Publicado:
Responder citando
Acabo de encontrar el ejemplo en la página
earth-api-samples.googlecode.com/ ...creen.html
Sonriente
Ir arriba Morta
Compartir:

_polifemo
SuperExpert
SuperExpert
Registrado:27-11-2009
Mensajes: 436

Votos: 0 👍

EnlacesAsunto: Re: ¿Como maximizar el div que contiene el plugin?

Publicado:
Responder citando
Fantástico Morta.

Encantado de que podamos aprender juntos. Guiño

Por cierto, veo con agrado que últimamente contamos con varios miembros colaborando en el foro con asuntos técnicos... A ver si tenemos suerte y conseguimos crear una comunidad estable.
Ir arriba _polifemo
Compartir:
Mostrar mensajes de anteriores:   
 Responder al tema   Versión Imprimible
Todas las horas son GMT + 1 Hora
Página 1 de 1 - Tema con 7 Mensajes y 9307 Lecturas - Última modificación: 27/07/2011




RSS: Foro Programación de Google Earth y Maps RSS - Ultimos Mensajes
Cambiar a:  


Puede publicar nuevos temas en este foro
No puede responder a temas en este foro
No puede editar sus mensajes en este foro
No puede borrar sus mensajes en este foro
No puede votar en encuestas en este foro
No Puedes adjuntar archivos en este foro
Tu puedes descargar archivos en este foro



Mostrar/Ocultar Últimas Fotos del Foro