I use google Maps Api v3 to render google map inside colorbox using ajax

Question

0

Asked: June 16, 20262026-06-16T10:35:52+00:00 2026-06-16T10:35:52+00:00

I use google Maps Api v3 to render google map inside colorbox using ajax

0

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:
enter image description here