How do I apply a circular mask on a google Map, so that the window only shows the map within the cir-CodePudding

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.

CodePudding user response：

You could use a mask:

Wrap your google map iframe in a tag and add mask styles to the tag.

<div ><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;
}

CodePudding user response：

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