Placed Google map using API key nothing shows up

Support
#21

Hey Kaliko,

I accidentally edited the message above. Anyway, this is what @Tristup is referring to:

  • See the secure note below

I have removed the script, and now the Map is displaying on the live view of the page. Please check your Events page in your browser. It may not display in the builder.

Cheers.

#22

Wow, yes, thank you, it’s working fine now. Do you have any idea how that script could have gotten into the header? Thank you again!!

#23

Hi Kaliko,

I am not sure how it got there. It took us a while to figure it out. Big thumbs up to @Tristup. Possibly, your dev (if you have one) or the one who installed the Snippets plugin may have added it.

Cheers.

#24

Haha, yes it was my dev guy, weeks ago, couldn’t figure out what the heck was going on!
Another question about the Map Marker element…is there a way to format the text that goes inside the pop up box?
Thank you again for figuring out what my dev guy should have figured out a long time ago :blush:

#25

Hey Kaliko,

Regretfully, there is no option to change the format of the Marker text. It is using the default styling from the Map api. You may need to add a custom CSS to change it. By default, it has this styling:

  • Screenshot in the secure note below
.gm-style .gm-style-iw {
    font-weight: 300;
    font-size: 13px;
    overflow: hidden;
}

You can modify that CSS code, add your custom styling, and add it to the Page CSS.

image

image

Best Regards.

#26

Okay, thank you.

Where would I put this this code from the map API (and would I select Javascript or CSS)?

Screenshot 2025-12-22 at 1.38.26 PM
Screenshot 2025-12-22 at 1.38.26 PM1346×684 122 KB

#27

Hello Kaliko,

You can copy the JavaScript code and paste it into the Page JS and CSS into the Page CSS box, or use the Raw Content element to insert the JS, CSS, or HTML directly.

Hope it helps
Thanks

#28

Okay, last question, I know you probably want to close this one out, but

I found where the JSON code was on the Google Cloud console for my map, and I copied it and pasted it into the JSON Map Styles area in the Map element in Cornerstone, but nothing has changed, and it’s been several hours (I have the ocean a different color). My question is would I then replace the Map ID (in the Cornerstone Map element) with the new Style ID that is shown here (see attached)? Is that what is needed to get the yellow ocean color to show up?
Thank you!Screenshot 2025-12-23 at 10.16.07 AM

#29

Hello Kaliko,

When using a Map ID, you must keep the Map ID and apply your styling to that Map ID in the Google Cloud console; you should not replace the Map ID with the Style ID in Cornerstone. You need to go to the Google Cloud console, open Map styles, edit the style (using the JSON tab if you like), and make sure that the style is associated with the same Map ID you are using in Cornerstone, then Save and Publish the style so your yellow ocean color goes live.

Hope it helps
Thanks

#30

Hi,
The style is associated with the Map ID used in Cornerstone, but still no yellow ocean.

#31

Hey Kaliko,

I am seeing this JSON:
image

Try to remove the JSON and let the styling associated with the Map ID be applied in the Map element.

Kindly let us know how it goes.

#32

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.