Show google map in hidden div (tabs)

map.html

<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=AIzaSyAtYogufqQUuAjrRx-Ps5hY0y9LXngGqMI">
</script>


<style type="text/css">
	#google-container {
		width: 100%;
		height: 340px;
		/*background-color: #e7eaf0;*/
	}
</style>
<div class="tab-content">
	<section id="cd-google-map">
		<div id="google-container"></div>
	</section>
</div>

<script type="text/javascript">
	function initMap() {

		var map = new google.maps.Map(document.getElementById('google-container'), {
			center: {
				lat: 59.413604,
				lng: 24.739561
			},
			zoom: 16
		});
		var image = 'https://developers.google.com/maps/documentation/javascript/examples/full/images/beachflag.png';
		var beachMarker = new google.maps.Marker({
			position: {
				lat: 59.413604,
				lng: 24.739561
			},
			map: map,
			icon: image
		});
		var center = map.getCenter();

// http://stackoverflow.com/questions/4064275/how-to-deal-with-google-map-inside-of-a-hidden-div-updated-picture

		$('.form_9076588182703530').on('click', function() { // tab click handler, force to resize map
			google.maps.event.trigger(map, 'resize');
			map.setCenter(center);
			console.log(center);
		});

	}
</script>


<script type="text/javascript">
	window.onload = initMap;
</script>

http://stackoverflow.com/questions/4064275/how-to-deal-with-google-map-inside-of-a-hidden-div-updated-picture

google for Loading google maps on a hidden div