Google maps 在Google Maps元素上添加插入框阴影

我愿意为包含GoogleMaps元素的标签添加一些插入框阴影。然而，似乎什么也没有发生，可能是因为Google在原始元素中加载了一些其他div，从而覆盖了生成的框阴影

我怎样才能达到这个效果

以下是我的代码：

<section id="map-container">
    <figure id="map"></figure>
</section>

#map-container  {
    position: relative;
    float: right;
    width: 700px;
    background-color: #F9FAFC;
    border-top-right-radius: 5px;
    border-bottom-right-radius: 5px;
}

#map    {
    position: relative;
    height: 400px;
    border-top-right-radius: 5px;
    border-bottom-right-radius: 5px;
    box-shadow: 0 1px 0 0 #F6F7FB inset, 0 -1px 0 0 #E0E5E1 inset, 0 -2px 0 0 #EBEBED inset, 0 -3px 0 0 #F4F4F6 inset;
}

#地图容器{
位置：相对位置；
浮动：对；
宽度：700px；
背景色：#F9FAFC；
边框右上角半径：5px；
边框右下半径：5px；
}
#地图{
位置：相对位置；
高度：400px；
边框右上角半径：5px；
边框右下半径：5px；
盒影：0 1px 0 0#F6F7FB插图，0-1px 0#E0E5E1插图，0-2px 0#EBEBED插图，0-3px 0#F4F6插图；
}

---

谢谢大家!

您需要查看Google正在添加的元素，并使用您的CSS样式来定位和覆盖这些元素。使用Firebug、webkit“inspect element”等查看添加的元素及其样式。

如果您希望设置信息窗口的样式，请查看

---

这适用于出现在谷歌地图上的大多数对象。用你自己的css瞄准他们是可能的，但我怀疑有人做过，因为这很难（我试过）

找到了答案。以下是工作CSS：

#map-container  {
    position: relative;
    float: right;
    width: 700px;
    border-top-right-radius: 5px;
    border-bottom-right-radius: 5px;
    box-shadow: 0 1px 0 0 #F6F7FB inset, 0 -1px 0 0 #E0E5E1 inset, 0 -2px 0 0 #EBEBED inset, 0 -3px 0 0 #F4F4F6 inset;
}

#map    {
    position: relative;
    height: 400px;
    border-top-right-radius: 5px;
    border-bottom-right-radius: 5px;
    z-index: -1
}

---

我添加了一个额外的包含插入阴影。 HTML: ... #地图容器{ 位置：相对位置； }

---

我就是这样做的。以下方法不会重叠贴图控件，因此将能够操纵贴图，即拖动、单击、缩放等

HTML:

演示：

---

---

更新：旧解决方案（请参阅）不支持伪元素，并且与旧浏览器兼容。这里仍然有演示：。

当遇到这种问题时，我通常会恢复使用自定义覆盖。（）

---

使用自定义覆盖在地图中最适合您的图层上添加一个div，您将能够使用CSS设置该div的样式

安德烈·霍拉克的回答最有效

但有时由于您的布局，使用z索引不是一个选项。在谷歌地图上添加一个额外的div是第二个最好的选择：

#map_canvas .shadow{
    width:100%;
    position:absolute;
    left:0;
    top:0px;
    height:100%;
    z-index:99999;
    position:relative;
    -webkit-box-shadow: inset 0px 0px 0px 1px rgba(0, 0, 0, 0.2);
    box-shadow: inset 0px 0px 0px 1px rgba(0, 0, 0, 0.2);
    pointer-events: none;
}

然后在谷歌地图脚本中：

google.maps.event.addListener(map, 'idle', function() {
        // Add shadow effect on map
        $("#map_canvas .shadow").remove();
        $("#map_canvas").prepend('<div class="shadow">');

    });

google.maps.event.addListener（映射'idle'，函数（）{
//在地图上添加阴影效果
$（“#map_canvas.shadow”）.remove（）；
$（“#地图画布”）。前置（“”）；
});

---

指针事件：无有点棘手，因为跨浏览器兼容。查找有关指针事件的详细信息另一个选项，虽然在所有情况下都不起作用，但将框阴影放置在贴图旁边的元素上。谷歌自己就是这样做的
我只是在尝试在嵌入地图的一侧添加一个插入阴影时遇到了同样的问题。我尝试将其添加到MapCanvas元素，但没有可见的阴影。不知道这种行为的原因，可能是地图中某些元素的绝对位置

无论如何，与其在代码中添加其他非mantic元素，我宁愿选择一个由覆盖在地图上的薄条（5px）构成的伪元素：

这将在左侧添加阴影：

#map-container:before {
    box-shadow: 4px 0 4px -4px rgba(0, 0, 0, 0.5) inset;
    content: "";
    height: 100%;
    left: 0;
    position: absolute;
    width: 5px;
    z-index: 1000;
}

演示：


对于右侧的阴影：

#map-container:before {
    box-shadow: -4px 0 4px -4px rgba(0, 0, 0, 0.5) inset;
    content: "";
    height: 100%;
    right: 0;
    position: absolute;
    width: 5px;
    z-index: 1000;
}

不，不是信息窗口，而是地图本身。我想在地图上添加一些微妙的插入框阴影，使其在页面的其余部分中脱颖而出。在您的示例中，您仍然能够拖动地图并单击缩放按钮吗？当我复制你的代码时，阴影确实起作用，但鼠标事件不起作用。不，当然对他不起作用。这是唯一存在的解决办法。该死的是鼠标事件不起作用！然而，谷歌真的应该提供一种实现这种效果的方法。我宁愿使用语义代码，但如果这能奏效，我会考虑它。谢谢大家!@你所说的语义代码是什么意思？我认为这是通过保留贴图操作向贴图容器添加内部阴影的唯一可能方法。我怀疑是否存在任何其他解决方案，只要谷歌不提供任何设置属性，就可以通过不使用额外标记来实现语义。但除此之外，你的例子很好。非常感谢。你将很难找到解决很多问题的语义解决方案。有时候你只需要凑合一下。我建议对这些东西使用除法，因为从语义上讲，它们是最好使用的。@AndreiHorak如果你需要更多的语义代码，这里是：。
google.maps.event.addListener(map, 'idle', function() {
        // Add shadow effect on map
        $("#map_canvas .shadow").remove();
        $("#map_canvas").prepend('<div class="shadow">');

    });

#map-container:before {
    box-shadow: 4px 0 4px -4px rgba(0, 0, 0, 0.5) inset;
    content: "";
    height: 100%;
    left: 0;
    position: absolute;
    width: 5px;
    z-index: 1000;
}

#map-container:before {
    box-shadow: -4px 0 4px -4px rgba(0, 0, 0, 0.5) inset;
    content: "";
    height: 100%;
    right: 0;
    position: absolute;
    width: 5px;
    z-index: 1000;
}