Sé que la API de Google Maps le permite superponer un círculo transparente sobre un mapa, pero quiero que el elemento del mapa real se represente dentro de un círculo. ¿Cuál sería el enfoque más limpio que recomiendas? No creo que la API tenga esta funcionalidad para remodelar la ventana. ¿Tendría que superponerlo a través de CSS? Cualquier ayuda sería muy apreciada.
Si es solo un círculo, simplemente coloque el iframe en un círculo con overflow:hidden .
.circle-wrapper { width: 70vh; height: 70vh; overflow: hidden; border-radius: 50%; } .circle-wrapper iframe { width: 100%; height: 100%; }Aquí está el codepen 👉 https://codepen.io/phucbui/pen/YzrLaJY
Podrías usar una máscara:
Envuelva su iframe del mapa de Google en una etiqueta y agregue estilos de máscara a la etiqueta.
<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; }