The page did not load Goggle Maps correctly

[jabedoya60]

Hi, I got Google API, I placed in the Cornerstone editor the element Map, I place API key and latitude ect.

When the page loads I get:

This page didn’t load Google Maps correctly. See the JavaScript console for technical details.

Also, how can increase the size of the crumbs?

Please help!

[Prasant]

Hello @jabedoya60,

Thanks for asking.

I think you are referring to Maps error in builder preview section. It’s a known bug and our developers are working to release a fix for the same in next release of X and Cornerstone. We are in beta testing phase and the final release should be available in next few weeks.

If you are referring to increase the font size of breadcrumbs, please add following CSS under X > Theme Options > CSS:

.x-breadcrumb-wrap {
    font-size: 16px;
}

If you would like to learn CSS, I am sharing few resources that you take a look to get started with CSS and an interesting tool that you can use to speed up the development process.

I recommend you to watch following video that will help you to get started with CSS.

https://www.youtube.com/watch?v=MFR4WXiLzpc

Sometimes it can get a bit difficult to find out the right selector to be able to write the required CSS codes. A handy tool that can help you in this is Google Chrome dev tools. I am sharing the resource that you can refer to get started with dev tools.

https://developers.google.com/web/tools/chrome-devtools/

https://www.youtube.com/watch?v=tP_kXBJWPhQ&t=200s

Thanks.

[jabedoya60]

Thank you so much for the super fast reply.

I will wait for the map fix, is no biggie.

Last questions about the breadcrumbs, the css you send was perfect, can I change to a custom text color the breadcrumbs?

Will start on CSS, know only a bit, thank you again.

[Prasant]

Hello @jabedoya60,

Thanks for updating the thread.

To change breadcrumbs test color, please add following CSS under X > Theme Options > CSS:

.x-breadcrumb-wrap a {
    color: #191818;
}
.x-breadcrumbs .current {
    color: #2b2a2a;
}
.x-breadcrumb-wrap a:hover {
    color: #b54c4c;
}
.x-breadcrumbs .delimiter {
    color: #170d0d;
}

Thanks.

[jabedoya60]

Hi, it did not work, it is still controlled by the “Header Font Color” under Typography, is there anyway to force it?

[christopher]

Hi James,

Please change the code to this one:

body .x-breadcrumb-wrap a {
    color: #191818;
}
body .x-breadcrumbs .current {
    color: #2b2a2a;
}
body .x-breadcrumb-wrap a:hover {
    color: #b54c4c;
}
body .x-breadcrumbs .delimiter {
    color: #170d0d;
}

The only thing I have done is to make the CSS selector a little bit more precise o override the default values. You will need to also change the color codes to the ones you like.

Thank you.