WordPress.org

Ready to get started?Download WordPress

Forums

MapPress Easy Google Maps
[resolved] Add round corners to map (5 posts)

  1. babochina
    Member
    Posted 2 years ago #

    Would anyone know how to make my mappress maps appear with round corners?
    I use mappress free version and I am quite a beginner at WordPress ...
    Thank you for your help

    http://wordpress.org/extend/plugins/mappress-google-maps-for-wordpress/

  2. babochina
    Member
    Posted 2 years ago #

    I bump it up ... I am still with the same problem, if anyone could help, this would be great thanks!

    http://oulalaparis.com/gres-zhanlan-fashion/

  3. crdunst
    Member
    Posted 1 year ago #

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

  4. babochina
    Member
    Posted 1 year ago #

    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 :-)
    babo

  5. babochina
    Member
    Posted 1 year ago #

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

Topic Closed

This topic has been closed to new replies.

About this Plugin

About this Topic