Google Map Inner Shadow

[Luisgo]

Hi!

Is there a native way to add those nice looking inner drop shadows to
the top and left borders of maps like google does on http://maps.google.com/?

I suppose I can add overlays but maybe there's an easier way?

Thanks!

[Mike Williams]

Aren't they just thin API v2 GScreenOverlay()s?

Maps.google.com uses v2

Hint: Don't try to have one big GScreenOverlay across the whole map with
all except the edges transparent. Even the transparent parts of a
GScreenOverlay prevent clicks and mouseovers reaching the underlying
map.

--
Mike Williams
Gentleman of Leisure

[Luisgo]

Ok, I extracted the shadows from maps.google.com (V2):

// CSS
.ds {
-moz-background-clip:border;
-moz-background-inline-policy:continuous;
-moz-background-origin:padding;
background:#000000 none repeat scroll 0 0;
overflow:hidden;
position:absolute;
top:0;
z-index:2;
}
.o1 { opacity:0.1; -moz-opacity: 0.1; filter:alpha(opacity=5); }
.o2 { opacity:0.08; -moz-opacity: 0.08; filter:alpha(opacity=5); }
.o3 { opacity:0.06; -moz-opacity: 0.06; filter:alpha(opacity=5); }
.o4 { opacity:0.04; -moz-opacity: 0.04; filter:alpha(opacity=5); }
.o5 { opacity:0.02; -moz-opacity: 0.02; filter:alpha(opacity=5); }
.h1 { height:1px; }
.h2 { height:2px; }
.h3 { height:3px; }
.h4 { height:4px; }
.h5 { height:5px; }
.v1 { width:1px; }
.v2 { width:2px; }
.v3 { width:3px; }
.v4 { width:4px; }
.v5 { width:5px; }

// HTML - include this after the map
// making sure this and the map are
// within the same relatively positioned
// element.
<div id="ds">
<div id="ds-h">
<div class="ds h1 o1"></div>
<div class="ds h2 o2"></div>
<div class="ds h3 o3"></div>
<div class="ds h4 o4"></div>
<div class="ds h5 o5"></div>
</div>
<div id="ds-v">
<div class="ds v1 o1"></div>
<div class="ds v2 o2"></div>
<div class="ds v3 o3"></div>
<div class="ds v4 o4"></div>
<div class="ds v5 o5"></div>
</div>
</div>

I'm sure there's a better way to do this but I just wanted it done.
Maybe I'll throw this into a bit of JS later on.

Note that I included "filter:alpha(opacity=5);" to make the shadows
look right in IE6, 7 and 8.

Enjoy.

[ficho]

Did this work for anyone?

I added both the CSS and html, positioning both into the same relative container but nothing.

Maybe it's outdated, not sure..