Support » Plugins and Hacks » MapPress Easy Google Maps » [Resolved] [Plugin: MapPress Easy Google Maps] Add round corners to map

[Resolved] [Plugin: MapPress Easy Google Maps] Add round corners to map

Viewing 4 replies - 1 through 4 (of 4 total)
  • I bump it up … I am still with the same problem, if anyone could help, this would be great thanks!


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

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

    Dear crdunst
    It is just so nice of you to try helping me out for this. I still haven t solved my problem yet and I ll try to implement your solution!
    A very big thank you for your generosity and the time you spent on this 🙂



    Tried this way, and it worked like a charm!!
    Thanks again

Viewing 4 replies - 1 through 4 (of 4 total)
  • The topic ‘[Resolved] [Plugin: MapPress Easy Google Maps] Add round corners to map’ is closed to new replies.
Skip to toolbar