Карта Google неправильно отображается в FancyBox. Как я могу это исправить? - PullRequest
Новая
       19

Карта Google неправильно отображается в FancyBox. Как я могу это исправить?

0 голосов
/ 10 февраля 2012

Мне нужно отобразить карту Google внутри FancyBox.В руководстве показано, как сделать это простым способом с помощью CSS-класса "fancybox.iframe", но мне понадобится мой FancyBox для отображения не только карты, т.е.форма ниже.

Пока вот мой код (очень простой):

HTML 

<div id="fancybox-container"></div>

CSS 

#fancybox-container {
  display: none;
  width: 450px;
  height: 500px;
  border: 1px solid red;
  padding: 3px;
  overflow: hidden;
}

и, наконец, некоторыеCoffeeScript: 

$ ->
  new FancyMap()

class FancyMap
  constructor: ->
    @openMap() #once fancybox is open proceed to render the map inside of it
    options =
      center: new google.maps.LatLng(6.191556, -75.579716)
      zoom: 14
      mapTypeId: google.maps.MapTypeId.ROADMAP
    @map = new google.maps.Map $('#fancybox-container')[0], options

  openMap: ->
    $('a[href=#fancybox-container]').fancybox
      maxWidth: 500
      maxHeight: 550
      fitToView: false
      autoSize: true
      closeClick: false
      openEffect: 'none'
      closeEffect: 'none'

window.FancyMap = FancyMap

Результат этого, почти то, что я хочу, за исключением того, что рендеринг испорчен,

fancybox+googlemaps

Если я перетащить карту внутрьрезультат ... что-то вроде этого:

fancyboxdragged

так что, в заключение, я определенно пропускаю важное свойство или конфигурацию, верно?Можете ли вы помочь мне решить эту проблему?

Бесконечный Спасибо заранее,

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

Ответы [ 2 ]

2 голосов
/ 10 февраля 2012

Google Maps делает это, когда не знает, насколько большим он будет в итоге, например, если вы назначите его световому коробу перед тем, как открыть его, карта не будет знать, какого размера он должен быть.

Вместо того, чтобы добавлять карту в конструктор, попробуйте добавить ее к обратному вызову, который будет срабатывать при открытии окна.

Пример кода, предоставленный "mu is too short" http://goo.gl/t7SOm

0 голосов
/ 11 февраля 2012

Вы также можете вызвать событие resize на Map, чтобы получить API Карт для изменения размера контейнера карты.

...