Тема Zerif pro, активация гугл карты по клику

Товарищи, помогите решить проблему! в теме отдельный блок для гугл карты, вот php модуля:

<?php

echo '<div class="gm">';
echo '<div class="gmap">';
$zerif_googlemap_address = get_theme_mod('zerif_googlemap_address');

if( !empty($zerif_googlemap_address) ):

	echo "<iframe class='zerif_google_map' frameborder='0' scrolling='no'  marginheight='0' marginwidth='0' src='https://maps.google.com/maps?&q=".urlencode( $zerif_googlemap_address )."&output=embed&iwloc'></iframe>";

endif;	

echo '</div>';
echo '</div>';
?>

хотел сделать активацию блока по клику, но что-то перемудрил, подскажите решение, вот что в css прописал:

.gm {
	position:relative;
	z-index: 2;
}

.gm:active + .gmap {
	display: block;

}

.gmap {
	position:relative;
	z-index: 1;
	pointer-events: none;
}

.gmap:hover {
	display: block;
}

.zerif_google_map {
	width:100%;
	height:500px;
}

зачем все это- чтобы при прокрутке страницы модуль карты(что на всю ширину) не прокручивалась