JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://maps.googleapis.com/maps/api/js?v=weekly"></script>
		<div id="bodycontainer" class="bodycontainer">
		  <div class="accordiancontrol shuttlegray shuttlegrayhover" id="accordiancontrol1">
		    <h1>Click Here to Open</h1>
		    <div class="nav-accordianhamburger">
		      <span></span>
		      <span></span>
		      <span></span>
		      <span></span>
		    </div>
		  </div>
		  <div class="accordianarea" id="accordianarea1">
		    <div style="display:inline-block;background-color:#fefefe;">
		      <p>some content goes here</p>
		    </div>
		    <div id="sitemap" style="float:right; width:350px; height:350px; vertical-align: top;"></div>
		    <div style="clear:both"></div>
		  </div>
		</div>

CSS

.bodycontainer {
			  width: 800px;
			}

			.shuttlegray {
			  -webkit-transition: background-color 0.6s, color 0.3s;
			  -moz-transition: background-color 0.6s, color 0.3s;
			  -ms-transition: background-color 0.6s, color 0.3s;
			  -o-transition: background-color 0.6s, color 0.3s;
			  transition: background-color 0.6s, color 0.3s;
			  background-color: #5a6572 !important;
			}

			.shuttlegrayhover:hover {
			  background-color: #6e7b8b !important;
			  color: #ffffff !important;
			}

			.accordiancontrol h1,
			.mapsearchcontrol h1 {
			  color: #FFFFFF;
			  font-size: 18px;
			  margin: 0px;
			  padding: 0px;
			  display: inline;
			}

			.accordiancontrol p,
			.mapsearchcontrol p {
			  color: #FFFFFF;
			  font-size: 16px;
			  margin: 0px;
			  padding: 0px;
			}

			.accordianarea {
			  display: none;
			  opacity: 0;
			  box-sizing: border-box;
			  margin: 0px 0px 20px 0px;
			  padding: 10px 0px 0px 0px;
			}

			.accordianarea:last-of-type {
			  margin: 0px 0px 0px 0px;
			}

			.accordianarea h2 {
			  margin: 10px 0px 0px 0px;
			}

JavaScript

$('.accordiancontrol').click(function(){
				var thisId = $(this).attr('id').replace(/^\D+/g,"")
				if ($('#accordianarea' + thisId).is(":visible"))
				{
					$('#accordianarea' + thisId).stop().css('opacity',1).slideUp().animate({opacity: 0,duration: 'fast'},{queue: false});
					$(this).find('.nav-accordianhamburger').removeClass('open');
				}
				else
				{
        	map_init();
					$('#accordianarea' + thisId).stop().css('opacity',0).slideDown().animate({opacity: 1,duration: 'fast'},{queue: false});
					$(this).find('.nav-accordianhamburger').addClass('open');
				}
			});



			function map_init() {
				var defaultZoom = 17;
				var allMarkers = new Array();
				var mapOptions = {
					zoom: defaultZoom,
					mapTypeId: google.maps.MapTypeId.ROADMAP
				};
				var map = new google.maps.Map(document.getElementById('sitemap'),mapOptions);
				
				var myLatlng = new google.maps.LatLng(0,0);
				var marker0 = new google.maps.Marker({
					position:myLatlng,
					map:map,
					draggable:false,
				});
				allMarkers.push(marker0);
				var myLatlng = new google.maps.LatLng(0,-1);
				var marker1 = new google.maps.Marker({
					position:myLatlng,
					map:map,
					draggable:false,
				});
				allMarkers.push(marker1);
				map_zoom();
				
				function map_zoom (){
					var bounds = new google.maps.LatLngBounds();
					for(i = 0;i < allMarkers.length;i++) {
						bounds.extend(allMarkers[i].getPosition());
					}
					map.setCenter(bounds.getCenter());
						map.fitBounds(bounds);
					var listener = google.maps.event.addListener(map, "idle", function() { 
						map.setZoom(map.getZoom()-1); 
						if(map.getZoom() > defaultZoom){
							map.fitBounds(bounds);
							map.setZoom(defaultZoom);
						}
						if(allMarkers.length == 1) {
							map.fitBounds(bounds);
							map.setZoom(defaultZoom);
						}
						google.maps.event.removeListener(listener); 
					});
				};
			}