ajax调用后，colorbox内的Google地图渲染偏好的灰色区域 [英] Google maps inside colorbox renders partiality gray area after ajax call

问题描述

我使用谷歌地图API v3来渲染谷歌地图在colorbox中使用ajax调用。

这是我用作地图和其他东西的容器的div，并且这个div将会显示在colorbox中，同时锚点巫婆ajax将会被调用：

 < div id =cb-js-map-contentstyle =display：none>< / div> ; 
< a href =＃cb-js-map-contentid =cb-js-showMap> 
显示地图
< / a> 
  

我使用ajax来检索文档中的女巫是地图标记和js函数，它将生成地图。这是ajax调用和colorbox初始化：

  FSM.mapAjaxCall = {
 GetMap：function（）{
 $（＃cb-js-showMap）。click（function（）{
 
 $ .ajax（{
 url：// my ajax url 
 cache：false ，
 dataType：'json'，
成功：函数（数据，状态）{
 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 =inlineClassid =cb-js-mainMapstyle =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）; 
 
 //为地图中心添加缩放事件并存储数据
 google.maps.event.addListener（map，'zoom_changed'，function（）{
 // listener代码
}）; 
 google.maps.event.trigger（地图，'resize'）; 
 
 
 
 
 
 
 $ b现在我的问题是这个设置几乎总是在firefox上运行，并在Chrome中稀少。这是多么有问题的屏幕：
  
 
 
 
关闭colorbox弹出窗口有时可以解决此问题。
解决方案
在success-callback中触发resize-event  $。ajax（） 
 
I use google Maps Api v3 to render google map inside colorbox using ajax call. 

This is div that i use as container for map and some other things, and that one will be displayed in colorbox, also anchor on witch click ajax will be called:
<div id="cb-js-map-content" style="display: none"></div>
<a href="#cb-js-map-content" id="cb-js-showMap">
   Show Map
</a>
I use ajax to retrieve document in witch is map markup and js function that will generate map. This is ajax call and colorbox init:
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();
                        }

                    });
                });
            }
        };
This is div where map will be loaded
<div class="inlineClass" id="cb-js-mainMap" style="width:1023px; height: 800px; display:block"></div>
using this js function:
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');

            }
Now my problem is that this setting works almost always on firefox, and sparsely in Chrome. This is how problematic screen looks like:


Closing colorbox popup sometimes resolve this issue.
解决方案
Trigger the resize-event in the success-callback of $.ajax()

                        
这篇关于ajax调用后，colorbox内的Google地图渲染偏好的灰色区域的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！