Create a "toggle to activate" Google map using a overlaid ::pseudo element.

map-toggler

/*
 * ===========================================================================
 *
 * Maps
 *
 * ===========================================================================
 *
 */
.map {

	position: relative;
	width: 100%;
	height: 0;

	border: em(14) solid $white;
	border-width: 0 em(14) em(14) em(14);

	padding-bottom: 56.25%;

	&:before {
		content: " ";
		display: block;
		width: 100%;
		height: 100%;
		position: absolute;
		z-index: z("map", "overlay");
		top: 0;
		left: 0;
		background-color: rgba(black, .5);
		pointer-events: auto;
	}

	&.is-active:before {
		opacity: 0;
		pointer-events: none;
	}

	iframe {

		position: absolute;
		z-index: z("map", "map");
		top: 0;
		left: 0;

		width: 100%;
		height: 100%;

	}

	@include mq($breakpointLap) {

		padding-bottom: 42%;

	};

	@include mq($breakpointMall) {
		
		// border-width: 0 em(14) em(14) em(14);

	};

}
.map-toggle {

	position: absolute;
	z-index: z("map", "toggle");
	bottom: 50%;
	right: 50%;
	transform: translate(50%, 50%);

	&.is-active {
		font-size: .65em;
		padding: .75em 1em;
		bottom: 1.5em;
		right: 3.25em;
		transform: translate(0, 0);

		@include state {
			background-color: $primaryColor;
			color: contrast($primaryColor);
			outline: 0;
		};
	}

}