Skip to main content

Advanced styling

If you're somewhat familar with HTML and CSS, you can customize the look of your embedded map quite easily. Remember that the iframe is just a HTML element, and can therefore also be styled as one. The basic idea is that you assign a class name to the iframe, and then reference that class name in your CSS code to apply different styles.

Here, we assign the class name mapzy-map to the iframe.

<iframe src="" allow="geolocation"
title="Map by" loading="lazy" referrerpolicy="no-referrer"

It can then be referenced in the CSS code like this:

// separate CSS file or inline CSS in your HTML with <style> tags

.mapzy-map {
// add any styling you want

What follows are some styling ideas, but you can do much more.

Rounded corners

Rounded corners are cool. That's just a fact. To round the corners of your map, use this CSS:

.mapzy-map {
border-radius: 15px;


What if your map had a smooth shadow? Try this:

.mapzy-map {
filter: drop-shadow(0 2px 2px rgba(0, 0, 0, 0.1));


Why not give your map a nice border? Maybe a nice green one:

.mapzy-map {
border-style: solid;
border-width: 3px;
border-color: rgb(52, 211, 153);