I’ve just had a quick go to see if I could do this for you, and I don’t think it can be done with pure css.
I tried adding rounded corners to the (many) nested map containers, but this requires the containers to have the ‘overflow’ property set to hidden, so the map tiles don’t overlap the corners. This breaks the map due to the way G maps loads the tiles to enable you to pan the map by clicking and dragging. In short, I can’t see how this could be done.
If I were you, I’d consider creating corner images and placing them using position: absolute; It’s a bit ugly, but should work and should work cross-browser too.
You would need to wrap your map within a container, then put your images also within that container. Give the container a position property of relative, then position your corners in turn. You’ll probably need to add a z-index on them too e.g.
<div id=”map-wrapper”>
*your mappress shortcode here*
<img src=”whatever” class=”corner tl” />
<img src=”whatever” class=”corner tr” />
<img src=”whatever” class=”corner bl” />
<img src=”whatever” class=”corner br” />
</div>
CSS…
#map-wrapper {
position: relative;
}
.corner {
position: absolute;
z-index: 100;
}
.tl {
top: 0;
left: 0;
}
.tr {
top: 0;
right: 0;
}
.bl {
bottom: 0;
left: 0;
}
.br {
bottom: 0;
right: 0;
}
The corner images would be the same colour as your background of course so it masks over the mappress map.
Try the above, I haven’t tested it but it should work.
good luck ??
