Карты Google в Fancybox - неверное отображение при повторном открытии

Question

У меня проблема с Google Maps API. Я использую V3 API и fancybox для отображения карты в виде лайтбокса. Когда я нажимаю на ссылку в первый раз, открывается окно fancybox, а также отображается карта загрузки. Кажется, все в порядке, но когда я закрываю fancybox и пытаюсь открыть снова, карта загружается неправильно .. Она загружается только примерно на половину площади, чем должна. Что-то может быть не так с объектом карты, который создается при втором открытии. Когда я перезагружаю страницу каждый раз, когда хочу получить правильную карту, это нормально .. Проблемы возникают, когда я пытаюсь открыть-закрыть-открыть-закрыть и т. Д. Кто-нибудь знает, что мне делать? Мне нравится fancybox, но теперь я полностью облажался :) Внизу есть несколько частей моего кода .. Спасибо

$(document).ready(function () {
  $("a.maps").fancybox({
    'overlayOpacity ': 0.5,
    'transitionIn': 'fade',
    'transitionOut': 'fade',
    'type': 'ajax'
  });
});

ЭТО СОДЕРЖАНИЕ FANCYBOX. ССЫЛКА ВЫЗЫВАЕТСЯ ОТ ПРОСТОГО a href = "" ...

function initialize() {
  var myLatlng = new google.maps.LatLng(49.095354, 17.749553);
  var myOptions = {
    zoom: 15,
    center: myLatlng,
    mapTypeId: google.maps.MapTypeId.ROADMAP,
    streetViewControl: false
  }
  var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
  var marker = new google.maps.Marker({
    position: myLatlng,
    map: map,
    title: "DAMN"
  });
}

function detectBrowser() {
  var useragent = navigator.userAgent;
  var mapdiv = document.getElementById("map_canvas");

  if (useragent.indexOf('iPhone') != -1 || useragent.indexOf('Android') != -1) {
    mapdiv.style.width = '100%';
    mapdiv.style.height = '100%';
  } else {
    mapdiv.style.width = '400px';
    mapdiv.style.height = '400px';
  }
}
initialize();
detectBrowser();
</script>
<div id="mapaOkolo">
<div id="map_canvas"></div>
</div>

Answer 1

Я сам столкнулся с этой проблемой и нашел обходной путь:

google.maps.event.addListener(<map object>, 'tilesloaded', function() {
    google.maps.event.trigger(<map object>, 'resize');
    <map object>.setCenter(<LatLng>);
});

Карта смещена от центра, поэтому ее также необходимо центрировать.

Answer 2

Это очень распространенная проблема. Пожалуйста, посмотрите здесь .Попробуйте использовать google.maps.event.trigger(map, "resize");

Надеюсь, это поможет