Google maps en oculto div

Question

Tengo una página con dos pestañas. La primera pestaña tiene fotos y la segunda un mapa de Google. El problema es que el mapa de google no está dibujando completamente porque está en un div oculto. Así que moví la función initialize() al href de la pestaña del mapa usando onclick(). Esto funciona la primera vez que hace clic en él, pero cuando vuelve a la pestaña de fotos y luego vuelve a la pestaña del mapa, el mapa solo se dibuja parcialmente. Si hace clic en la pestaña del mapa una segunda vez, funciona perfectamente. ¿Algunas ideas?

pestañas javascript:

<script type="text/javascript"> 

$(function() { 
    var tabContainers = $('div.tabs > div'); 

    $('div.tabs ul.tabNavigation a').click(function() { 
     tabContainers.hide().filter(this.hash).show(); 

     $('div.tabs ul.tabNavigation a').removeClass('selected'); 
     $(this).addClass('selected'); 

     return false; 
    }).filter(':first').click(); 
}); 

</script> 

JavaScript de Google Maps:

<script type="text/javascript"> 
    function initialize() { 
    var latlng = new google.maps.LatLng(<?=$lat ?>, <?=$lng ?>); 
    var myOptions = { 
     zoom: 15, 
     center: latlng, 
     mapTypeId: google.maps.MapTypeId.ROADMAP 
    }; 
    var map = new google.maps.Map(document.getElementById("map_canvas"), 
     myOptions); 

    var marker = new google.maps.Marker({ 
     position: latlng, 
     map: map, 
     title:"<?=$fulladdress ?>" 
    }); 
} 
</script> 

html:

<div class="tabs"> 
     <ul class="tabNavigation"> 
      <li><a href="#first">Photos</a></li> 
      <li><a href="#map_canvas" onclick="initialize(); return false;">Map</a></li> 
     </ul> 


     <div id="first"> </div> 
     <div id="map_canvas" ></div> 

Answer 1

He visto esto antes de tener que cambiar el tamaño del mapa:

google.maps.event.trigger(map, 'resize'); 
map.setZoom(map.getZoom()); 

Esto es para V3:

http://code.google.com/p/gmaps-api-issues/issues/detail?id=1448

Un poco más de información:

https://groups.google.com/group/google-maps-js-api-v3/browse_thread/thread/251f20b769d116ea/ba3ca54f5e1352a2?pli=1

Answer 2

Siguiendo el enlace que aparece a partir de Pete, yo era capaz de resolver eso.

Probablemente tenga una función llamada calcRoute(). Es posible que deba activar esta función dos veces. Al principio, cuando se activa, se carga bien, pero es posible que deba activar esa función también cuando cambie la pestaña. ¡Eso debería funcionar!

Answer 3

Esto funciona para mí:

google.maps.event.trigger(map, 'resize'); 

pero, después de que se muestra la pestaña ...

$('a[href="#mytab"]').on('shown', function (e){ 
     google.maps.event.trigger(map, 'resize'); moveTo(); 
    }); // realocate the map 

estoy usando arranque, encontrar la función similar en la interfaz de usuario jQuery.

Answer 4

Lo resolví vinculando el cambio de tamaño del mapa al controlador que muestra un contenedor de sección. La parte importante aquí en lo que respecta a la necesidad de hacer clic dos veces para cambiar el tamaño del mapa se encuentra en el bit setTimeout. Eso proporcionará una demora suficiente para permitir que el ancho se calcule en el contenedor alrededor del mapa.

/** 
* This example will work with foundation 4 sections. However, the idea is the same for any collapsed map. 
* Load a map object 
* Find it's parent (which is hidden) 
* Bind a click event to the element which 'unhides' your container 
* */ 
(function($) { 
    Drupal.behaviors.foundationCollapseHack = { 
     attach: function(context, settings) { 
      // check whether we have a map 
      if(typeof settings.vrListingMap != 'undefined') { 
       // on page load 
       $(window).load(function() { 
       // grab a map object 
       var map = Drupal.behaviors.vrwebListingMaps.map; 
       // if we have a section container 
       if($(map.b).parents('.section-container').length > 0) { 
        // find any maps in these tabs and bind a click to it 
        $(map.b).parents('section').find('p.title').children('a').click(function() { 
         // B.c of timing - it's important to wrap the resize stuff in a timeOut. 
         // This assures that getComputedStyle is not null when resize fires 
         setTimeout(function() { 
          var coord = map.getCenter(); 
          google.maps.event.trigger(map, "resize"); 
          map.setCenter(new google.maps.LatLng(coord.lat(), coord.lng()), settings.vrListingMap.options.default_zoom);  
         }, 0); 
        }); 
        } 
       }); 
      } 
     } 
    } 

})(jQuery); 

Answer 5

Después de un día luchando con esto, seguí el enlace del asker a su problema.

vi este fragmento algunos muchas veces

google.maps.event.trigger(map, 'resize'); 

y no pude encontrar el lugar adecuado para insertar este fragmento de código. Como novato en programación, probé todos los lugares, lo que incluye después del init, después de llamar al mapa, en todas partes. Nada funcionó.

Luego decidí seguir una situación real, la persona que realmente hizo esta pregunta. Esto es lo que hizo, trabajó para él o ella y también funcionó para mí.Hice un cambio menor porque siempre es así. Su/su enlace es uno de los comentarios.

My adobe DW no da esta opción al hacer clic, pero ... funciona. Debería probar directamente en el delimitador de etiquetas donde está oculto el div. Puede ser el lugar apropiado. Llamar a init y recenter en la etiqueta de cuerpo (o etiqueta de anclaje). Una vez que haga clic en el mapa, volverá a centrar el mapa.

<body onclick="initialize(); center_map();"> 

Después de la

function initialize { 
.... 

} 

tener éste

<script type="text/javascript"> 
function center_map() { 
var center = map.getCenter(); 
    document.getElementById("your_div_name").style.width = 'auto'; 
    document.getElementById("your_div_name").style.height = '250px'; 
    google.maps.event.trigger(map, 'resize'); 
    map.setCenter(center); 
} 
</script> 

novatos la atención de todo el mundo: cambiar el nombre del div anteriormente. Pon tus tamaños reales. Algunas personas dicen que necesitas números reales en el tamaño. Pero cada vez que haces clic en cualquier parte del cuerpo, ejecuta la función. Intenta ser más específico en tu función onclick. Espero que esto ayude a alguien.