Can I add CSS within Sparkle itself?

I have embedded a Google Map though the Embed-element, and the client asks me te remove the reviews in the box on the top left. The CSS for this is quite simple:

.gm-style .review-box {
display: none !important;
}

But how do I incorporate this in my Sparkle project?
I tried it with at the start of the code and at the end of the code, and tried to use

<style> and </style>

at the start and end, but nothing works fo far…

After more research I realised this can’t be done in this way.

My solution was to make a screenshot of Google Maps while editing out everything I didn’t want in the CSS inspector in the browser, and just linking this image to Google Maps.

This way the option to interact with the map within the site itself are lost, but there’s a lot more control of what is visible and what isn’t.

As far as I know, screenshots of google maps are against their terms. I’m pretty sure mucking with CSS is also against their terms.

If the client doesn’t like some aspect of the maps, then the only solution is to not use them. Realistically there isn’t much of an alternative.

1 Like

The only legal use of Google Maps/Earth is using their API (so Google can load all their tracking garbage) or purchase the specific screen shot with attribution (which still comes with tracking). Penalty is your clients website won’t show in Google search.

1 Like

Thanks for the replies, I didn’t know that Google punishes this kind of solution in this way.

Guess the client has to make sure that he gets lots of good reviews online, to counter the negative one. Once that’s done I’ll embed the map again.