Styling issue with Google Maps buttons

Hello there.
I am experiencing a styling issue with the zoom and full-screen buttons on a map created in Google Maps Pro. Here is the link:
https://acmefx.ca/contact/
It seems the plugin's style sheet is using "margin: 0 !important" on the images inside the button tags. Without that rule, the buttons look as expected. This only happens with inserted maps, the map widget is unaffected.
The staging site is easier to inspect if you can have a look:
http://acmefx.staging.wpengine.com/contact/

Thank you,
Tomas

  • Nithin

    Hi lachtani,

    I was able to replicate the same when tested in my side, seems like this is more of a bug on how the CSS is rendered in the plugin side. Since the CSS is already applied in the map once the plugin is embedded, I'm afraid, I don't see a CSS that would override when applied outside the plugin side.

    Easiest workaround would be to manually edit the plugin file temporarily, located under:
    /wp-content/plugins/wpmu_dev_maps_plugin/css/google_maps_user.min.css

    And changing the CSS to the following:

    .agm_google_maps img {
        background: none repeat scroll 0 0 transparent!important;
        border: medium none!important;
        max-width: none;
        max-height: none;
        padding: 0!important;
        margin: 0;
    }

    I'm reporting this to the developers, so that this would get corrected in the next plugin update, so that you don't have to worry about the above plugin update changes getting overridden. Thanks for bringing this into our attention, have a great day ahead. :slight_smile:

    Best Regards,
    Nithin

  • Nithin

    Hi lachtani,

    I also got an update regarding the CSS which you could apply without editing the plugin directly, you could use that CSS until a fix within the plugin is provided, the CSS would be:

    .agm_google_maps button img {display:none;}
    .agm_google_maps button img:nth-of-type(2) {display:block;}
    .agm_google_maps button {padding:10px!important;}

    You can add the above CSS, under Appearance > Customize > Additional CSS section of your WordPress dashboard.

    Either one of the above shared workaround should help at the moment.

    Regards,
    Nithin

Thank NAME, for their help.

Let NAME know exactly why they deserved these points.

Gift a custom amount of points.