¿Cómo puedo colocar un div html sobre el plugin de Google Earth? Implica wmode, me imagino

Question

Estoy teniendo problemas colocando un html div sobre el plugin de Google Earth en una aplicación web, cualquier ayuda sería apreciada.

Está bien para el mapa, el terreno y el modo híbrido, sino en el modo 'Tierra', el flash se inicia en capas y automáticamente el mapa en la parte superior.

Z-indexing no ayuda.

Es de suponer que yo podría hacer algo como:

document.getElementById('flashDiv').setAttribute('wmode', 'opaque'); 

pero dado que las cosas de Google es compilado sobre la marcha, que hace que sea mucho más difícil. Ver el código generado no ha ayudado aquí. De nuevo, debido a que se compila sobre la marcha, cosas como SWFObject no pueden salvar el día ...

¿Alguien ha encontrado algo similar? He pasado la mañana rastreando el grupo API de Google Earth sin mucho provecho.

Actualización: Después de más tirones de pelo, la respuesta puede estar en un iframe shim. También pude haber llegado a la conclusión de que el complemento está basado en Flash. Investigando ...

alt text http://neilsimonmckeown.googlepages.com/overlay.jpg

Answer 1

que arme una demo que muestra cómo utilizar IFRAME cuñas aquí:

http://earth-api-samples.googlecode.com/svn/trunk/demos/customcontrols/index.html

Answer 2

Si se trata de un plugin, entonces no se puede colocar de forma fiable otros elementos más de la parte superior de la misma. Los navegadores suelen soltar la mayor parte de su capacidad de elementos de "capa" cuando se trata de complementos.

Supongo que un iframe puede ser una forma de evitarlo, siempre y cuando compruebe que esto todavía funciona en la mayoría de los navegadores.

Answer 3

Después de observar la forma en que Google hace que los usuarios inserten el código, parece que está con un iFrame. Aún así, si tiene algún problema con un flash, consulte a continuación ...

Ejecutando situaciones similares al intentar mostrar un menú desplegable sobre un elemento flash (o html sobre un video de YouTube). Hubo algunos factores que entraron en juego.

El primero era que mi elemento html que quería pasar el mouse sobre el elemento flash tenía que ser un elemento hermano html con las propiedades css establecidas para cada elemento hermano y también para el div principal. Así, por ejemplo:

<div id="parent"> 
    <div id="sibling"></div> 
    <embed id=”flash”><other script code></embed> 
</div> 

Entonces mi css sería

//.parent may not need to be set to relative 
#parent { position: relative; } 
// the value on sibling1 just needs to be higher than .sibling2 
#sibling { position: relative; z-index: 20; } 
#flash { position: relative; z-index: 10; display:inline } 

La otra cosa a destacar es el flash necesita tener el parámetro wmode fijada a transparente.

Este truco ha funcionado para varias aplicaciones de flash así como para videos de YouTube. El truco es asegurarse de que el html que desea mostrar sobre el flash sea un elemento hermano del código flash real y no del padre div, z -index para que el html se muestre sobre el flash es más alto que el elemento flash, ambos elementos html tienen su posición establecida en relativa o absoluta, y el parámetro wmode se establece en transparente.

Espero que esto ayude, pero supongo que su problema es con el iFrame.

Answer 4

No hay soporte directo para superponer la división 'z-indexing' en el Api o Dom. El complemento carga un archivo ejecutable que, en términos muy simples, perfora un agujero en la ventana del navegador. Usar la técnica 'iframe shim' es la solución estándar aunque la transparencia puede ser complicada.

Hay una open Feature request para que esta funcionalidad se agregue a la API. La sección de comentarios contiene buena información y enlaces.

Además, hay una gran línea demo of this here

Answer 5

conjunto "iframe" z-index para 100

y establecer div que se muestra en la parte superior z-index a 200 (div debe ser al menos posición relativa)