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!

score 30 · Answer 1 · edited May 23 '17 at 12:18

30

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/.

edited May 23 '17 at 12:18

Community

1
1

answered May 17 '13 at 15:56

VisioN

143,310
32
282
281

I would rather use semantic code but if this works, I'll take it into account. Thank you! – linkyndy May 20 '13 at 17:04
1

@linkyndy What do you mean by semantic code? I see this as the only possible way of adding inner shadow to the map container with preserving map manipulation. I doubt if any other solution even exists, as soon as Google does not provide any set up property for that. – VisioN May 20 '13 at 18:10
Semantic by not using extra markup. But otherwise, your example is fine. Thank you! – linkyndy May 21 '13 at 11:15
You'll be hard pressed to find a semantic solution to a lot of things out there. Sometimes you just need to make do. I suggest using divisions for these things, as semantically they're the best thing to use. – Jared Aug 16 '13 at 08:49
4

@AndreiHorak If you need more semantic code, here it is: http://jsfiddle.net/dkUpN/80/. – VisioN Feb 04 '14 at 17:01

Marco Scarfagna · Answer 2 · 2014-05-31T03:04:32.043

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

score 4 · Accepted Answer · answered Jun 29 '12 at 15:30

4

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
}

answered Jun 29 '12 at 15:30

linkyndy

17,038
20
114
194

In your example, are you still able to drag the map and click the zoom buttons? When I replicate your code the shadows do work but the mouse events do not. – Ole Nov 07 '12 at 20:20
No of course it won't work for him. This is the only existent solution. The shit is that the mouse events do not work! However, Google should really provide a way to achieve this effects. – Santiago Baigorria Jun 23 '13 at 00:51

score 1 · Answer 4 · answered Jul 08 '13 at 17:49

When faced with this sort of problem, I usually revert to using custom overlays. (https://developers.google.com/maps/documentation/javascript/overlays#AddingOverlays)

Use a custom overlay to add a div inside the map on whichever layer suits you best, you will be able to style this div with CSS.

score 1 · Answer 5 · answered Oct 10 '13 at 15:13

Andrei Horak answer works best.

But Sometimes using z-index is not an option because of your layout. Appending an extra div to google maps is a second best option:

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

Then in your google maps script:

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

    });

The pointer-events:none; is a little bit tricky because of cross browser compatibility. Find more on pointer-events here

score 1 · Answer 6 · answered Mar 04 '14 at 14:58

1

One other option, while not working in all cases, is to put the box-shadow on the element next to the map. Google themselves did it this way here

answered Mar 04 '14 at 14:58

cgat

3,689
4
24
38

score 0 · Answer 7 · answered Jun 29 '12 at 15:09

0

You will need to look at the elements that Google is adding and target and override those with your CSS styles. Use Firebug, webkit "inspect element" etc. to see the elements that get added and their styles.

answered Jun 29 '12 at 15:09

Joshua

3,615
1
26
32

score 0 · Answer 8 · edited May 23 '17 at 12:26

0

If you are looking to style the infowindow have a look at this question.

This applies to most objects that appear on google maps. Targeting them with your own css is possible but I doubt anyone ever did it because it is hard (i tried).

edited May 23 '17 at 12:26

Community

1
1

answered Jun 29 '12 at 15:12

Per Salbark

3,597
1
23
24

No, not an infowindow, the map itself. I would like to add some subtle inset box-shadow on it so it stand out the rest of the page. – linkyndy Jun 29 '12 at 15:21

score 0 · Answer 9 · answered Mar 27 '13 at 16:51

I added an extra that contained the inset shadow. 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);        
}

Add inset box-shadow on Google Maps element

9 Answers9

Linked