Set a custom close icon for map info bubble

This support ticket is created 5 years, 1 month ago. There's a good chance that you are reading advice that it now obsolete.

This is the technical support forum for Toolset - a suite of plugins for developing WordPress sites without writing PHP.

Everyone can read this forum, but only Toolset clients can post in it. Toolset support works 6 days per week, 19 hours per day.

Sun	Mon	Tue	Wed	Thu	Fri	Sat
-	9:00 – 12:00	9:00 – 12:00	9:00 – 12:00	9:00 – 12:00	9:00 – 12:00	-
-	13:00 – 18:00	13:00 – 18:00	13:00 – 18:00	14:00 – 18:00	13:00 – 18:00	-

Supporter timezone: America/Jamaica (GMT-05:00)

Tagged: Views plugin

This topic contains 4 replies, has 2 voices.

Last updated by Gian Luca 5 years, 1 month ago.

Assisted by: Shane.

Author

Posts

May 11, 2020 at 9:02 am #1619477

Gian Luca

Is there any way to customize the close icon for a map's info bubble? It is so tiny.....

May 11, 2020 at 3:44 pm #1620137

Shane

Supporter

Languages: English (English )

Timezone: America/Jamaica (GMT-05:00)

Hi Gian,

Thank you for getting in touch.

What you can do is try to adjust the size itself using CSS. You can change the image but because there is some default CSS applied to the icon, your image will still display the same size.

Add this custom css to your site and it should adjust the icon size.

.gm-ui-hover-effect img{
width: 31px !important;
    height: 30px !important;
    margin: -7px !important;
    margin-top: 3px !important;
}

Please try this and let me know if it helps.
Thanks,
Shane

May 11, 2020 at 5:06 pm #1620261

Gian Luca

Hmmmmm... That's quite good! But what if I want to change the icon?

May 11, 2020 at 6:27 pm #1620305

Shane

Supporter

Languages: English (English )

Timezone: America/Jamaica (GMT-05:00)

Hi Gian,

You will need to use custom jQuery in order to do this.

jQuery(document).ready(function(){
    jQuery(".gm-ui-hover-effect img").attr("src", "my-image/url.png");

});

The above code should be able to help. You will need to replace "my-image/url.png" with the actual URL to the source image.

Thanks,
Shane

May 14, 2020 at 2:00 pm #1624395

Gian Luca

My issue is resolved now. Thank you!