I know the Google Maps API allows you to overlay a transparent circle over a map, but I'm wanting the actual map element itself to render within a circle. What would be the cleanest approach you recommend? I don't think the API has this functionality to reshape the window. Would I need to overlay it via CSS? Any help would be greatly appreciated.
If it is just a circle, simply put the iframe in a circle with overflow:hidden.
.circle-wrapper {
width: 70vh;
height: 70vh;
overflow: hidden;
border-radius: 50%;
}
.circle-wrapper iframe {
width: 100%;
height: 100%;
}
Here's the codepen 👉 https://codepen.io/phucbui/pen/YzrLaJY
You could use a mask:
Wrap your google map iframe in a tag and add mask styles to the tag.
<div class="mask-tag"><iframe src=""></iframe></div>
.mask-tag {
/** use any image you would like */
mask-image: url(/img/theme/shape-heart.svg);
mask-size: contain;
mask-repeat: no-repeat;
mask-position: center;
-webkit-mask-image: url(/img/theme/shape-heart.svg);
-webkit-mask-size: contain;
-webkit-mask-repeat: no-repeat;
-webkit-mask-position: center;
}