Карты Google в скрытом div

У меня есть страница с двумя вкладками. На первой вкладке есть фотографии, а вторая - на карте google. Проблема в том, что карта google полностью не рисуется, потому что она находится в скрытом div. Поэтому я переместил функцию initialize() на href вкладки map, используя onclick(). Это работает в первый раз, когда вы нажимаете на него, но когда вы вернетесь на вкладку фотографий, а затем вернитесь на вкладку карты, карта только частично рисует. Если вы нажмете вкладку карты во второй раз, она отлично работает. Любые идеи?

вкладки 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>

ОТВЕТЫ

Ответ 2

После дня, борющегося с этим, я последовал ссылке на его проблему.

Я видел этот фрагмент несколько раз

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

и я просто не мог найти нужное место для вставки этого фрагмента кода. Будучи новичком в программировании, я пробовал все места, которые включают после init, после вызова карты, всюду. Ничего не получилось.

Затем я решил следовать реальной ситуации, человеку, который действительно задал этот вопрос. Это то, что он сделал, работал на него или ее, и это также работало для меня. Я сделал незначительные изменения, потому что это всегда так. Его/ее ссылка является одним из комментариев.

Мой adobe DW не дает эту опцию onclick, но... она работает. Вы должны попробовать прямо на привязке тега, где div скрыт. Это может быть подходящее место. Вызовите init и recenter в теге body (или теге привязки). Как только вы нажмете на карту, она будет повторно отображать карту.

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

После

function initialize {
....

}

Введите этот

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

Внимание новичков со всего мира: измените имя div выше. Поместите свои реальные размеры. Некоторые люди говорят, что вам нужны реальные цифры в размере. Но каждый раз, когда вы нажимаете какую-либо часть тела, она запускает функцию. Постарайтесь быть более конкретными в вашей функции onclick. Надеюсь, это поможет кому-то.

Ответ 3

Это работает для меня:

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

но после отображения вкладки...

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

Я использую bootstrap, нахожу аналогичную функцию в пользовательском интерфейсе jquery.

Ответ 4

Следуя ссылке, предоставленной Питом, я смог это решить.

У вас, вероятно, есть функция calcRoute(). Возможно, вам придется дважды запускать эту функцию. Сначала, когда он срабатывает, он загружается нормально, но вам может потребоваться снова включить эту функцию, когда вы измените вкладку. Это должно сработать!

Ответ 5

Я справился с этим, связав изменение размера карты с контроллером, который отображает контейнер раздела. Важная часть здесь, поскольку она связана с необходимостью щелчка дважды, чтобы изменить размер карты, находится в бите setTimeout. Это обеспечит достаточную задержку, чтобы позволить вычислять ширину на обертке вокруг карты.

/**
 * This example will work with foundation 4 sections. However, the idea is the same for any collapsed map. 
 * Load a map object
 * Find it 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 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);