CODEWITHSUNDEEP
google-mapscss
linkyndy
linkyndy

Reputation: 17920

Add inset box-shadow on Google Maps element

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!

Upvotes: 15

Views: 15813

Answers (9)

VisioN
VisioN

Reputation: 145428

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

Upvotes: 30

Marco Scarfagna
Marco Scarfagna

Reputation: 61

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

Upvotes: 6

cgat
cgat

Reputation: 3909

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

Upvotes: 1

WIWIWWIISpitFire
WIWIWWIISpitFire

Reputation: 1549

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

Upvotes: 1

Quickredfox
Quickredfox

Reputation: 1466

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.

Upvotes: 1

patrick brady
patrick brady

Reputation: 19

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

Upvotes: 0

linkyndy
linkyndy

Reputation: 17920

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
}

Upvotes: 4

Per Salbark
Per Salbark

Reputation: 3645

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

Upvotes: 0

Joshua
Joshua

Reputation: 3603

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.

Upvotes: 0

Related Questions