I am using Google Maps Api v3 to render a google map inside a colorbox using an ajax call.
This is the div that I use as a container for the map and some other things, and that it will be displayed in the colorbox, and the witch click ajax binding 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 get the document in witch - this is the map markup and the js function that will generate the map. This is an 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 the div where the 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 option works almost always on firefox and rarely on Chrome. Here's what the problem screen looks like: 
Closing the colorbox popup sometimes resolves this issue.