Google maps dans div caché

J'ai une page avec deux onglets. Le premier onglet contient des photos et la seconde une carte google map. Le problème est que la carte de google n'est pas complètement le dessin parce qu'il est caché dans un div. J'ai donc déplacé la fonction initialize() pour le href de l'onglet carte à l'aide de onclick(). Cela fonctionne de la première fois que vous cliquez sur elle, mais lorsque vous revenez à l'onglet "photos", puis revenir à l'onglet carte la carte que partiellement attire. Si vous cliquez sur l'onglet carte un deuxième temps, il fonctionne parfaitement. Des idées?

onglets 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>

google maps javascript:

<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>

source d'informationauteur Rob

14

J'ai vu ça avant, vous avez besoin de redimensionner la carte:
```
google.maps.event.trigger(map, 'resize');
map.setZoom( map.getZoom() );
```
C'est pour la V3:

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

Un peu plus d'infos:

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

Après une journée de la difficulté avec cela, j'ai suivi le sens du lien à son problème.

J'ai vu cet extrait certain nombre de fois
```
google.maps.event.trigger(map, 'resize');
```
et je n'arrivais pas à trouver le bon endroit pour insérer ce bout de code. Comme un débutant dans la programmation, j'ai essayé tous les lieux, qui comprend après l'init, après l'appel de la carte, partout. Rien n'a fonctionné.

Alors j'ai décidé de suivre une situation réelle de la personne qui a posé cette question.
C'est ce qu'il a fait, travaillé pour lui et il a également travaillé pour moi. J'ai fait un changement mineur parce que c'est toujours comme ça. Son lien est l'un des commentaires.

Mon adobe DW n'a pas cet option onclick, mais... ça marche. Vous devriez essayer directement sur la balise d'ancrage où la div est caché. Il peut être l'endroit approprié.
Appel de l'init et recentrer à la balise body (ou balise d'ancrage). Une fois que vous cliquez sur la carte, il va recentrer la carte.
```
<body  onclick="initialize(); center_map();">
```
Après la
```
function initialize {
....

}
```
Avoir un
```
<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>
```
L'Attention des débutants de tous les coins du monde: changer le nom de la div ci-dessus. Mettre votre vraie taille. Certaines personnes disent que vous avez besoin de nombres réels dans la taille. Mais chaque fois que vous cliquez sur n'importe quelle partie du corps, il exécute la fonction. Essayez d'être plus précis sur vous onclick function.
Espérons que cela aide quelqu'un à la.

Cela fonctionne pour moi:

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

mais, après l'onglet est affiché...

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

Je suis en utilisant bootstrap, trouver la fonction même de jquery UI.

1

En suivant le lien fourni de Pete, j'ai été en mesure de résoudre ce problème.

Vous avez probablement une fonction appelée calcRoute(). Vous pourriez avoir besoin pour déclencher cette fonction deux fois.
Au début, lorsqu'il est déclenché, il charge très bien, mais vous pourriez avoir besoin pour déclencher cette fonction est toujours ainsi lorsque vous changez d'onglet.
Qui devrait!

J'ai travaillé en liaison de la carte de redimensionnement pour le régulateur qui permet de faire apparaître une section contenant. L'important ici, car il se rapporte à avoir besoin de cliquer deux fois pour redimensionner la carte se trouve dans le setTimeout peu. Qui va fournir juste assez de retard pour permettre à la largeur calculée sur wrapper autour de la carte.

/**
 * 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);

Vous devez vous connecter pour publier un commentaire.