在Google地圖元素上添加嵌入框陰影

Question

我願意爲包含Google Maps元素的標記添加一些嵌入陰影框。但是，似乎沒有任何反應，可能是因爲Google在原始元素中加載了一些其他div，因此覆蓋了生成的box-shadow。

我該如何達到這個效果？

這裏是我的代碼：

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

謝謝！

Answer 1

想通了。這裏的工作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 
} 

Answer 2

您將需要查看Google添加的元素，並使用您的CSS樣式進行定位並覆蓋這些元素。使用Firebug，webkit「檢查元素」等來查看添加的元素及其樣式。

Answer 3

如果你正在尋找風格的infowindow看看this question。

這適用於大多數出現在谷歌地圖上的對象。針對他們與你自己的CSS是可能但我懷疑有人曾經這樣做，因爲它是硬（我試過）。

Answer 4

我添加了一個包含插入陰影的額外。 HTML： ... #mapContainer { position：relative; }

.map{ 
width:425px; 
height:350px; 
z-index:9999; 
position:absolute; 
top:0; 
left:0; 
@include borderAffect($pad:0,$borderCol:#00467F,$insetVal:true);   
} 

Answer 5

這就是我做到的。下面的方法將不會重疊地圖控件，所以你就能操縱地圖，即拖動，點擊，縮放等

HTML：

<div class="map-container"> 
    <div class="map"></div> 
</div> 

CSS：

.map-container { 
    position: relative; 
    overflow: hidden; 
} 
.map-container:before, .map-container:after, .map:before, .map:after { 
    content: ''; 
    position: absolute; 
    box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.3); 
    z-index: 1; 
} 
.map-container:before { top: -5px; left: 0; right: 0; height: 5px; } 
.map-container:after { right: -5px; top: 0; bottom: 0; width: 5px; } 
.map:before { bottom: -5px; left: 0; right: 0; height: 5px; } 
.map:after { left: -5px; top: 0; bottom: 0; width: 5px; } 

DEMO：http://jsfiddle.net/dkUpN/80/

---

UPDATE：舊的解決方案（見1^st revision）沒有僞元素支持，並與舊的瀏覽器兼容。演示仍然可以在這裏：http://jsfiddle.net/dkUpN/。

Answer 6

當面對這類問題時，我通常會恢復使用自定義覆蓋。 （https://developers.google.com/maps/documentation/javascript/overlays#AddingOverlays）

使用自定義覆蓋圖在地圖上添加div，無論哪個圖層最適合您，您將能夠使用CSS對該div進行樣式設置。

Answer 7

Andrei Horak答案效果最好。

但有時使用z-index不是一個選項，因爲你的佈局。追加額外的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">'); 

    }); 

的pointer-events:none;是因爲跨瀏覽器兼容的有點棘手。查找關於指針事件的更多信息here

Answer 8

另一個選項雖然不適用於所有情況，但將box-shadow放置在地圖旁邊的元素上。谷歌自己這樣做here

Answer 9

我只是有同樣的問題，同時嘗試添加嵌入式陰影的一面嵌入式地圖。我嘗試將它添加到地圖畫布元素中，但沒有看到陰影。不知道這種行爲的原因，可能是位置：絕對的地圖中的一些元素。

無論如何，而不是添加其他unsemantic元素的代碼，我寧願去對於由疊加到地圖的薄（5像素）條的pseudoelement：

這增加了在左側的陰影：

#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; 
} 

演示：http://jsfiddle.net/marcoscarfagna/HSwQA/

---

對於權側影子，而不是：

#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; 
} 

Answer 10

使用上前後僞元素pointer-events: none;幫助，如果你需要更大的陰影（這將影響到地圖的操作）。因此，這些元素似乎不存在鼠標指針...