Yo soy capaz de imprimir el mapa utilizando Drupal código en un div. Me gustaría que este mapa aparecen dentro de un fancybox y se oculta en el sitio web. Me las he arreglado para hacerlo (fancybox funciona ok) sin embargo, el mapa no se muestra correctamente – no hay navegación y sólo gris área vacía dentro del Mapa (aunque logotipo de google está allí). ¿Alguien tiene una idea de lo que podría estar equivocado? Supongo que podría darse el caso de que la IDENTIFICACIÓN representa sólo uno de los elementos, por lo que sólo hace que el fondo y el resto se ignora, pero para ser honesto, no tengo idea(clase de uso en su lugar). Cualquier consejo apreciado. Gracias

Mi código:

<script type="text/javascript">
    $(document).ready(function() {

    $("a#inline").fancybox({
    'hideOnContentClick': true,
    'overlayColor'      : '#ccffee',
    'overlayOpacity'    : 0.8
    });
});

</script>

Enlace para mostrar el mapa:

<a id="inline" href="#mapcontainer" >
Show Map
</a>

Real Div que imprime el mapa (funciona a la perfección cuando se establece visible)

<div style="display:none">
<div id="mapcontainer">
<?php print $node->content['field_maploc']['field']['items']['#children'] ?> </div></div>

El código de PHP que genera el siguiente código html:

<div style="width: auto; height: 400px;" id="openlayers-container-openlayers-map-auto-id-0" class="openlayers-container openlayers-container-preset-question_map"> <div style="width: auto; height: 400px;" id="openlayers-map-auto-id-0" class="openlayers-map openlayers-preset-question_map"></div> </div> 

La salida de corriente – JQuery FancyBox con Google Maps

¿tiene usted un ejemplo de la página??
podría usted mostrar lo que es html prestados dentro de <div id="mapcontainer" /> ?
por favor, consulte la actualización del código html.
Si puedo quitar de la Pantalla:ninguna todo funciona perfectamente, pero el mapa que aparece en la página así..¿alguna idea de cómo ocultar de una manera diferente?
Tal vez me estoy perdiendo algo aquí, yo estaba esperando a ver algo de código de google o si era el mapa de representación dentro de un iframe o así. El código html no me dijo nada pero anidado div sin contenido. PREGUNTA: ¿usted realmente necesita para imprimir el mapa a través de Drupal código o en su lugar de enlace para el mapa directamente a través de fancybox?? Lo que quiero decir es que si el mapa tiene que ser escondido en su página (que podría afectar a la carga de la página) o simplemente llame directamente con fancybox?

OriginalEl autor Vonder | 2012-06-05

2 Comentarios

  1. 5

    Parece ser un problema (bug?) cuando google maps se inicializa en un oculto div (puede ser el mismo caso cuando el uso de pestañas) desde display:none puede establecer su width y height a 0.

    Cuando el mapa en línea es visible, fancybox es capaz de calcular sus dimensiones, por lo tanto funciona cuando le quite display:none.

    La solución se debe cambiar el tamaño del mapa una vez que el fancybox ya está abierto por lo que el mapa va a encajar en la fancybox dimensiones. Usted puede utilizar el onComplete de devolución de llamada para que.

    Otras cosas a tener en cuenta:

    • Puede que sea necesario establecer autoDimensions ya sea true o false dependiendo de si el selector de #mapcontainer ha css dimensiones o no (conjunto a false si no, de lo contrario configurar para true.) Yo creo que tiene dimensiones ya que se puede mostrar el mapa en línea de modo que el valor inicial sería true.
    • Puesto que usted está utilizando de contenido en línea (fancybox v1.3.x) tenga cuidado de este error. El mismo enlace también se muestra la solución.

    Por lo que su fancybox secuencia de comandos personalizada debe verse como:

     $("a#inline").fancybox({
      'hideOnContentClick': false, //so you can handle the map
      'overlayColor'      : '#ccffee',
      'overlayOpacity'    : 0.8,
      'autoDimensions': true, //the selector #mapcontainer HAS css width and height
      'onComplete': function(){
        google.maps.event.trigger(map, "resize");
      },
      'onCleanup': function() {
       var myContent = this.href;
       $(myContent).unwrap();
      } //fixes inline bug
     });

    el método para cambiar el tamaño del mapa puede ser diferente dependiendo de la versión de la API de google maps está utilizando

    Puede comprobar https://stackoverflow.com/a/2590049/1055987 para referencia futura.

    ACTUALIZACIÓN: he añadido un DEMO aquí

    Wow, muchas gracias! No cambia nada excepto de botón de cierre no funciona ahora. Pero he comprobado y parece que estoy utilizando la api v2…Puede usted por favor me dan el código, estoy confundido ahora..Gracias por muh por su ayuda!
    OK solucionado! He quitado display:none, la ponemos en un contenedor, con la anchura y altura igual a 0 y margen -9999px. Funciona a la perfección. No fue el caso con el mapa de cambiar el tamaño – ahora funciona con google y yahoo maps, en lugar comportamiento extraño de la propiedad display. Muchas gracias por tu ayuda de todos modos!
    Para google maps v2 de verificación developers.google.com/maps/documentation/javascript/v2/… …. se puede ayudar a alguien más (checkResize() método)

    OriginalEl autor JFK

  2. 0

    Es el hideContentOnClick parámetro. Pruebe a establecer el parámetro para false.

    no se.. El mapa no es randered correctamente, no hay botones de navegación, sin calles, sólo el bakground, sin embargo, funciona a la perfección cuando fuera de fancybox.
    cuando me quite display:none todo funciona, pero el mapa que aparece en la página, no sólo dentro de fancybox…
    tal vez esto ayude https://github.com/fancyapps/fancyBox/issues/115
    tiene que ser en línea no iframe, pero gracias de todos modos..

    OriginalEl autor watercolor12

Dejar respuesta

Please enter your comment!
Please enter your name here