[exitointeractiveParticipant]

Hello,

I have attempted to modify the custom css to allow me to make the google map on my about page appear in a circle. I tried the following:

map {
border: 5px solid #000000;
overflow:hidden;
border-radius:999px;
-moz-border-radius:999px;
-webkit-border-radius:999px;
-o-border-radius:999px;
position:fixed;
}

.map {
border: 5px solid #000000;
overflow:hidden;
border-radius:999px;
-moz-border-radius:999px;
-webkit-border-radius:999px;
-o-border-radius:999px;
position:fixed;
}

#map {
border: 5px solid #000000;
overflow:hidden;
border-radius:999px;
-moz-border-radius:999px;
-webkit-border-radius:999px;
-o-border-radius:999px;
position:fixed;
}

None seemed to work when I entered them in the map’s custom css field. Any ideas on how to fix this?

[Prasant RaiModerator]

Hello There,

Thanks for writing in! To assist you with this issue, we’ll first need you to provide us with your URL. This is to ensure that we can provide you with a tailored answer to your situation. Once you have provided us with your URL, we will be happy to assist you with everything.

Thanks.

[exitointeractiveParticipant]

This reply has been marked as private.

[John EzraMember]

Hi there,

Thanks for updating the thread! You can add this under Custom > CSS in the Customizer or in your child theme’s style.css file.

.x-map-inner.x-google-map-inner {
    border: 5px solid #000000;
    border-radius:999px;
    -moz-border-radius:999px;
    -webkit-border-radius:999px;
    -o-border-radius:999px;
    width:440px;
}

Hope this helps – thanks!

[exitointeractiveParticipant]

This reply has been marked as private.

[ThaiModerator]

Hi There,

Please update the previous CSS a bit:

.x-map-inner.x-google-map-inner {
    border: 5px solid #A3A3A3;
    border-radius: 50%;
    -moz-border-radius: 50%;
    -webkit-border-radius: 50%;
    -o-border-radius: 50%;
    width: 330px;
    margin-top: 20px;
    margin-left: auto;
    margin-right: auto;
}

Hope it helps.

[exitointeractiveParticipant]

Perfection. Is there a way to add a pin on the location on the map easily?

[Prasant RaiModerator]

Hello There,

Thanks for writing in!

To add an google map marker first is to navigate to https://www.google.com/maps/ then tap the location you want to point. A latitude and longitude value respectively will be available on the upper left and on the address bar. Then use that value with [google_map_marker].

Thanks.

[exitointeractiveParticipant]

This reply has been marked as private.

[exitointeractiveParticipant]

Disregard, I fixed it. Thanks a lot!

[FriechModerator]

Glad you sorted things out.

Cheers!

[Author]

Posts