JSFiddle - React, Tailwind, and code Playground

HTML

<svg class="svg">

  <clipPath id="map" clipPathUnits="objectBoundingBox">
  	<path d="M1,0.104 L1,1 C0.998,0.998,0.995,0.997,0.993,0.995 C0.971,0.979,0.948,0.968,0.925,0.959 C0.883,0.942,0.839,0.933,0.795,0.929 C0.781,0.927,0.767,0.926,0.753,0.926 C0.748,0.926,0.744,0.926,0.739,0.926 C0.737,0.926,0.735,0.926,0.732,0.926 C0.729,0.926,0.725,0.926,0.721,0.926 C0.717,0.926,0.714,0.927,0.71,0.927 C0.643,0.929,0.575,0.942,0.508,0.962 C0.456,0.978,0.404,0.989,0.352,0.994 C0.35,0.994,0.348,0.994,0.346,0.994 H0.346 C0.344,0.994,0.342,0.995,0.34,0.995 C0.338,0.995,0.335,0.995,0.333,0.995 C0.33,0.995,0.327,0.995,0.325,0.996 C0.311,0.996,0.297,0.996,0.283,0.996 C0.212,0.993,0.14,0.979,0.072,0.944 C0.049,0.933,0.027,0.919,0.006,0.901 C0.005,0.901,0.004,0.9,0.004,0.9 L0.004,0.9 C0.002,0.899,0.001,0.898,0,0.897 V0 C0.002,0.002,0.005,0.004,0.007,0.006 C0.029,0.021,0.052,0.032,0.075,0.042 C0.117,0.058,0.161,0.068,0.205,0.072 C0.219,0.073,0.233,0.074,0.247,0.074 C0.252,0.075,0.256,0.075,0.261,0.075 C0.263,0.075,0.266,0.075,0.268,0.075 C0.272,0.075,0.275,0.075,0.279,0.074 C0.283,0.074,0.286,0.074,0.29,0.074 C0.358,0.071,0.425,0.058,0.492,0.039 C0.544,0.023,0.596,0.011,0.648,0.007 C0.65,0.006,0.652,0.006,0.654,0.006 C0.656,0.006,0.658,0.006,0.66,0.006 C0.662,0.006,0.665,0.006,0.667,0.006 C0.67,0.005,0.673,0.005,0.676,0.005 C0.689,0.005,0.703,0.005,0.717,0.005 C0.788,0.007,0.86,0.022,0.928,0.056 C0.951,0.068,0.973,0.082,0.995,0.099 C0.995,0.1,0.996,0.1,0.997,0.101 L0.997,0.101 C0.998,0.102,0.999,0.103,1,0.104"></path>
  </clipPath>
</svg>


<section class="map">
		<div class="container">
			<h3 class="product__title">Карта </h3>
			<ul class="map__list">
				<li class="map__box map__box--active">1 block</li>
				<li class="map__box">2 block</li>
			</ul>	
		</div>
		<div class="map__content">	
			<div class="map__wrap">
				<div class="map__block">
					<div class="map__inner">
						<iframe...

CSS

.map {
	margin-bottom: 80px;
}

.map .product__title {
	padding-bottom: 40px;
}

.map__list {
	display: flex;
	justify-content: center;
	max-width: 765px;
	width: 100%;
	margin-bottom: 40px;
}

.map__box {
	cursor: pointer;
	position: relative;
	font-size: 24px;
	line-height: 1;
	color: #281565;
	text-transform: uppercase;
	padding: 0 42px;
	padding-bottom: 23px;
	border-bottom: 1px solid #fe5B4B;
	font-weight: 700;
	transition: 0.3s color;
}

.map__box:after {
	transition: 0.3s background-color;
}

.map__box--active {
	color: #fe5b4b;
}

.map__box--active:after {
	position: absolute;
	content: ' ';
	bottom: -1.5px;
	left: 0px;
	width: 100%;
	height: 3px;
	background-color: #fe5b4b;
}

.map__wrap {
	position: relative;
	z-index: 4;
	height: 900px;
	overflow: hidden;
}

.map__inner {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	overflow: hidden;
}

.map__inner iframe {
	display: block;
	width: 100%;
	height: calc(100% + 210px);
	margin: -105px 0;
}

.map__block {
	position: relative;
	z-index: 2;
	left: -1px;
	top: 0px;
	width: calc(100% + 5px);
	height: 100%;
	clip-path: url(#map);
}

@media screen and (max-width: 960px) {

.map__wrap {
	height: 500px;
}

}

@media screen and (max-width: 780px) {

.map__list {
	flex-direction: column;
}

.map__box {
	font-size: 22px;
	padding: 0 20px;
	padding-bottom: 15px;
	margin-bottom: 15px;
}

.map__wrap {
	height: 400px;
}

}



.svg {
  	position: absolute;
	width: 0px;
	height: 0px;
}

JavaScript

map = new google.maps.Map(document.querySelectorAll('iframe'), {
  scrollwheel: false,
  zoom: 8
});