google-maps - Shadowbox 中的 Google Maps v2，仅适用于 Webkit

Question

我正在尝试使用 Shadowbox（jQuery 适配器）打开自定义 Google 地图。我的代码在 Webkit 浏览器中完美运行，但在 FF、IE 和 Opera 中显示空白（黑色）阴影框窗口。这是我的代码：

//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

虽然我没有找到上述代码不起作用的原因（可能只是因为它已被弃用），但将代码迁移到 Maps API V3 可以解决这个问题。

//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)
                });
            }
        }
    });
});