Google Maps v2 in Shadowbox, only works in Webkit

Question

I'm trying to open up a custom Google Map using Shadowbox (jQuery adaptor). My code works perfectly in Webkit browsers, but shows up a blank (black) shadowbox window in FF, IE and Opera. Here's my code:

//map
$('.map').click(function() {
    Shadowbox.open({
        player:     'html',
        content:    '',
        height:     300,
        width:      500,
        options:    {
            onFinish: function(item) {
                //create map
                var body = document.getElementById(Shadowbox.playerId);
                var map = new GMap2(body);
                map.setCenter(new GLatLng(45.7311, 21.2320), 16);

                //create icon
                var marker_icon = new GIcon(G_DEFAULT_ICON);
                marker_icon.iconSize = new GSize(35, 38);
                marker_icon.iconAnchor = new GPoint(17, 30);
                marker_icon.image = 'http://domain.com/images/map-marker.png';

                //add marker

                var point = new GLatLng(45.7311, 21.2320);
                map.addOverlay(new GMarker(point, {icon: marker_icon}));

                //add some simple controls
                map.addControl(new GSmallMapControl());
                map.addControl(new GMapTypeControl());
            }
        }
    });
});

//shadowbox
Shadowbox.init();

Answer 1

While I didn't find out the reason the above code doesn't work (it might be simply because it's deprecated), migrating the code to Maps API V3 solves this problem.

//map
$('.map').click(function() {
    Shadowbox.open({
        player:     'html',
        content:    '',
        height:     300,
        width:      500,
        options:    {
            onFinish: function(item) {
                //create map
                var map = new google.maps.Map(document.getElementById(Shadowbox.playerId), {
                    center: new google.maps.LatLng(45.7311, 21.2320),
                    mapTypeId: google.maps.MapTypeId.ROADMAP,
                    zoom: 16
                });

                //add marker
                var marker = new google.maps.Marker({
                    icon: 'http://domain.com/test/images/map-marker.png',
                    map: map,
                    position: new google.maps.LatLng(45.7311, 21.2320)
                });
            }
        }
    });
});