Add inset box-shadow on Google Maps element

Question

I am willing to add some inset box-shadow to a tag that is containing a Google Maps element. However, it seems nothing happens, probably because Google loads some other div's in the original element, hence covering the generated box-shadow.

How can I achieve this effect?

Here's the code I have:

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

Thank you!

Answer 1

That's how I did it. The following method won't overlap map controls, so you will be able to manipulate the map, i.e. drag, click, zoom, etc.

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: The old solution (see 1^st revision) didn't have pseudo-elements support and was compatible with old browsers. Demo is still available here: http://jsfiddle.net/dkUpN/.

Answer 2

I just had the same issue while trying to add an inset shadow to one side of an embedded map. I tried adding it to the map-canvas element but no shadows were visible. No idea about the reason of this behaviour, maybe is the position:absolute of some of the elements within the map.

Anyway, instead of adding other unsemantic elements to the code, I'd rather go for a pseudoelement made of a thin (5px) strip overlayed to the map:

This adds the shadow on the left side:

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

demo: http://jsfiddle.net/marcoscarfagna/HSwQA/

---

For a right side shadow instead:

#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 3

Figured it out. Here the working 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
}