Navigation
Archive / Google Map Into a Circle
This is archived content. Visit our new forum.

Tagged: 

  • Author
    Posts
  • April 10, 2016 at 5:23 pm #875617
    Audseo
    Participant

    Hey there X team. I’m struggling to find the right code to adjust the border radius of my Google Map embeds. Could you kindly point me in the right direction? I’ll post a link in the next comment. Thanks!

    April 10, 2016 at 5:23 pm #875618
    Audseo
    Participant
    This reply has been marked as private.
    April 11, 2016 at 2:51 am #876068
    Paul R
    Moderator

    Hi,

    Thanks for writing in!

    You can add this under Custom > CSS in the Customizer.

    
.x-map .x-map-inner {
    border-radius: 20px;
}

    You may change 20px to achieve your desired result.

    Hope that helps.

    April 11, 2016 at 5:15 pm #877273
    Audseo
    Participant

    Sorry, that doesn’t work. Well, sort of. It only works up until 120px, but if I exceed that (trying to make it a circle), it reverts back to a square.

    April 12, 2016 at 3:53 am #877913
    Paul R
    Moderator

    Hi,

    Sorry about that, please replace the code above to this.

    
.x-map .x-map-inner {
    margin: 0 auto;
    width: 300px;
    border-radius: 150px;
    height: 300px;
    padding: 0;
}

    Hope that helps.

    April 12, 2016 at 12:46 pm #878676
    Audseo
    Participant

    That worked perfectly. I appreciate your help. I thought I had tried everything 🙂

    April 13, 2016 at 12:44 am #879424
    Christopher
    Moderator

    We’re Glad that it worked for you.

  • Author
    Posts
  • <script> jQuery(function($){ $("#no-reply-875617 .bbp-template-notice, .bbp-no-topic .bbp-template-notice").removeClass('bbp-template-notice'); }); </script>