Javascript 透明div重叠Google'；谷歌地图上的谷歌标志

在我的网站主页上有一个大图片，它占据了100%的宽度和60%的高度（它是一个带有css背景图片而不是标签的div）。 在这张图片上，有一个黑色的透明div（mainFormContainer）和一些表单输入。 其中两个输入是绑定到GooglePlaceAutoComplete的地址字段

下面是HTML代码

<div id="titleContainer" class="splash-container" style="position: relative;" >
    <div id="mapContainer" style="width: 100%; position: absolute;top: 0;"></div>
    <div  id="mainFormContainer" class="splash-bottom">
        <form></form>
    </div>
</div>

但由于它在谷歌地图中添加了一个div，我尝试了以下代码：

map.controls[google.maps.ControlPosition.BOTTOM_CENTER].push(cloneSearchBar());
function cloneSearchBar()
{
    var clone = $('#mainFormContainer').clone(true);
    clone.css('width', '100%');
    clone.css('height', $('#mainFormContainer').height());
    console.log(clone[0]);
    return clone[0];
}

这个把戏给了我许多新问题：

Google Place自动完成不起作用（自动完成建议根本不显示）

字体的设计来自地图，而不是我的CSS

我有一个带有日期选择器的字段输入，它不能按预期工作。日期选择器出现，但当我单击日期时，它不会填充输入

---

所以我放弃了这个解决方案。

这些元素有一个共同的属性，它们通过CSS放置在：

底部：0px

您可以使用此选项创建选择器：

#mapContainer div[style*="bottom: 0px"]

要应用填充，可以在底部使用透明边框：

  #mapContainer div[style*="bottom: 0px"]{
    border-bottom:50px solid rgba(0,0,0,0);
  }

演示：

但我不确定这是否是一个好方法（API可能会改变），您最好尝试最后的尝试（将表单用作映射控件）。当您添加原始的
#mainFormContainer
而不是克隆时，问题1+#3可能会得到解决（至少自动完成作为控件可以正常工作，我在小提琴上添加了自动完成来演示它）。问题#2应该通过CSS解决。
我不确定这是否会违反TOS。您不应该删除、模糊或以任何方式更改任何品牌特征、徽标[…]-这会被视为更改吗？它非常有效！！我必须说，这是一个非常聪明的解决方案！关于TOS，我也不知道，但我想做的是尊重他们。重叠在地图底部的div明显模糊了品牌功能。@MrUpsidown他们只希望谷歌徽标出现在地图上，可以将徽标向上或向下移动而不制作徽标obscure@SnowBases参考？@MrUpsidown
  #mapContainer div[style*="bottom: 0px"]{
    border-bottom:50px solid rgba(0,0,0,0);
  }