私はGoogle Maps Api v3を使用して、ajax呼び出しを使用してカラーボックス内にGoogleマップをレンダリングします。
これは、マップやその他のコンテナーとして使用する div であり、カラーボックスに表示されます。また、ウィッチ クリック ajax のアンカーが呼び出されます。
<div id="cb-js-map-content" style="display: none"></div>
<a href="#cb-js-map-content" id="cb-js-showMap">
Show Map
</a>
魔女のドキュメントを取得するために ajax を使用します。これは、マップ マークアップと、マップを生成する js 関数です。これは ajax 呼び出しとカラーボックスの初期化です:
FSM.mapAjaxCall = {
GetMap: function () {
$("#cb-js-showMap").click(function () {
$.ajax({
url: //my ajax url
cache: false,
dataType: 'json',
success: function (data, status) {
var target = $("#cb-js-map-content");
target.append(data.Html);
if (typeof (data.Javascript) === "undefined") {
return;
}
$.loadScript(data.Javascript);
}
});
$("#cb-js-map-content").show();
$("#cb-js-showMap").colorbox({
inline: true,
height: colorboxHeight,
width: colorboxWidth,
onClosed: function () {
$("#cb-js-map-content").hide();
}
});
});
}
};
これはマップが読み込まれる div です
<div class="inlineClass" id="cb-js-mainMap" style="width:1023px; height: 800px; display:block"></div>
このjs関数を使用して：
initializeMap = function () {
var mapOptions = {
center: centerLatlng,
zoom: 8,
minZoom: 10,
mapTypeId: google.maps.MapTypeId.ROADMAP,
scrollwheel: false
};
map = new google.maps.Map(document.getElementById("cb-js-mainMap"), mapOptions);
//Add event for zoom changed and store data for map center
google.maps.event.addListener(map, 'zoom_changed', function () {
//listener code
});
google.maps.event.trigger(map, 'resize');
}
今私の問題は、この設定がFirefoxではほとんど常に機能し、Chromeではまばらに機能することです。問題のある画面は次のようになります。
カラーボックスのポップアップを閉じると、この問題が解決することがあります。