-1

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.

Milo
  • 1
  • related question: [Safari breaks border radius using Google maps in a div](https://stackoverflow.com/questions/23361722/safari-breaks-border-radius-using-google-maps-in-a-div) – geocodezip Jan 04 '22 at 02:36

2 Answers2

1

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

phucbm
  • 885
  • 6
  • 13
0

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;
}
Yevgeniy
  • 300
  • 2
  • 7