JQuery FancyBox с Google Maps

Я могу распечатать карту, используя код Drupal в div. Я бы хотел, чтобы эта карта появлялась внутри fancybox и скрывалась на веб-сайте. Мне удалось это сделать (fancybox работает нормально), однако карта отображается неправильно – на карте нет навигации и только серой пустой области (хотя есть логотип google). Кто-нибудь есть идея, что может быть неправильно здесь? Я предполагаю, что это может быть так, что идентификатор отображает только один элемент, поэтому он отображает только фон, а остальные игнорируются, но, честно говоря, я понятия не имею (используйте class вместо этого). Любые советы приветствуются. благодаря

Мой код:

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

Ссылка, чтобы показать карту:

  Show Map  

Фактическое Div, которое печатает карту (отлично работает, если установлено видимым)

 
content['field_maploc']['field']['items']['#children'] ?>

Код PHP генерирует следующий html:

 

Текущий выход – вывод

    Кажется, что проблема (ошибка?), Когда карты google инициализируются в скрытом div (может быть один и тот же случай при использовании вкладок), поскольку display:none может установить его width и height в 0 .

    Когда встроенная карта видна, fancybox способен вычислять ее размеры, поэтому она работает, когда вы удаляете display:none .

    Обходной путь должен resize карты после того, как fancybox уже открыт, чтобы карта вписывалась в размеры fancybox. Для этого вы можете использовать обратный вызов onComplete .

    Другие вещи, которые необходимо учитывать:

    • Вам может потребоваться установить autoDimensions как true и false зависимости от того, имеет ли селектор #mapcontainer css или нет (если установлено значение false , в противном случае установлено значение true .) Я бы подумал, что он имеет размеры, так как вы можете отображать карту в строке, начальное значение будет true .
    • Поскольку вы используете встроенный контент (fancybox v1.3.x), будьте осторожны с этой ошибкой . Эта же ссылка также показывает обходной путь.

    Поэтому ваш собственный скрипт fancybox должен выглядеть так:

      $("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 }); 

    метод изменения размера карты может отличаться в зависимости от версии API Google Maps, которую вы используете

    Вы можете проверить https://stackoverflow.com/a/2590049/1055987 для получения дополнительной информации.

    UPDATE : я добавил DEMO здесь

    Это параметр hideContentOnClick . Попробуйте установить этот параметр в значение false .