在透明标题和侧边栏后面展开Goog​​le地图

Question

我们正在建立一个应具有以下布局的网站：

如您所见，有标题和侧边栏，内容区域是使用Google Maps Javascript API v3构建的Google地图。

现在我们想让标题和侧边栏变得半透明，以便在标题和侧边栏后面可以看到地图，如下所示：

但是，现在标题和侧边栏与Google徽标和缩放控件重叠。

有没有办法告诉谷歌地图它应该在其控件的位置上应用一些填充？

当然，我们可以尝试移动Google徽标和控件＆＃34;手动＆＃34;通过应用一些CSS，但每次用户使用地图时谷歌地图Javascript API都会恢复其位置（例如平移或滚动），因此这会导致我们的代码与谷歌之间发生争执。

Answer 1

我找到了一个似乎可靠的答案：

控件

您可以通过添加虚拟控件为控件添加上边距：

var dummy = document.createElement('div');
dummy.style.height = '55px';
dummy.style.width = '100px';
map.controls[google.maps.ControlPosition.TOP_RIGHT].push(dummy);

然后，在配置中，使用RIGHT_TOP：

放置缩放控件

zoomControl: true,
zoomControlOptions: {
    style: google.maps.ZoomControlStyle.LARGE,
    position: google.maps.ControlPosition.LEFT_TOP,
},

请注意，这仅适用，因为TOP_RIGHT控件始终位于 RIGHT_TOP控件之上

。

Google徽标

以下代码等待初始化Google地图，然后将类gmaps-logo-padded添加到徽标中：

var moveLogo = function () {
    var logo = $('#map div a div img').parent().parent().parent();
    if (logo.length == 0)
        window.setTimeout(moveLogo, 10);
    else
        logo.addClass('gmaps-logo-padded');
};
moveLogo();

然后，通过应用以下CSS，您可以更改徽标的位置：

.gmaps-logo-padded {
    left: 300px !important;
}

请注意Terms of Service第9.4段禁止隐藏或删除徽标。

Answer 2

对于zoom control展示位置，您可以使用Control positioning，例如：

zoomControlOptions: {
        position: google.maps.ControlPosition.RIGHT_TOP
    },