JSFiddle - React, Tailwind, and code Playground

HTML

<select id="select">
    <option value="">Select</option>
    <option value="layer1">Layer 1 TXT</option>
    <option value="layer2">Layer 2 MAP</option>
</select>

<br><br>
    <div id="layer1" style="display:none">
        This is layer 1
    </div>

    <div id="layer2" style="display:none">
        <input id="geocomplete" type="text" placeholder="Type in an address" />
        <div id="map_canvas"></div>
    </div>    
    
<script src="http://maps.googleapis.com/maps/api/js?sensor=false&amp;libraries=places"></script>
<script src="http://ubilabs.github.io/geocomplete/jquery.geocomplete.js"></script>

CSS

fieldset { width: 320px; margin-top: 20px}
      fieldset strong { display: block; margin: 0.5em 0 0em; }
      fieldset input { width: 95%; }
	  
	#geocomplete { width: 200px}
	#map_canvas { 
  		width: 600px; 
  		height: 400px; 
  		margin: 10px 20px 10px 0;
        background-color: rgb(229, 227, 223);
	}

JavaScript

$(document).ready(function() {
    
    

    var mapOptions = {
        zoom: 8,
        center: new google.maps.LatLng(-34.397, 150.644)
    };
    map = new google.maps.Map(document.getElementById('map_canvas'), mapOptions);
	
	$('#select').change(function() {  
		if ($(this).val() == 'layer1') {
			$('#layer1').show(); 
			$('#layer2').hide();
		} else {
			$('#layer1').hide();
            //alertPos();
			$('#layer2').show();
            //alertPos();
            google.maps.event.trigger(map, 'resize');
		}
	});	
	
});




function alertPos() {
    var offsets = document.getElementById("map_canvas").getBoundingClientRect();
    var top = offsets.top;
    var left = offsets.left;
    var width = offsets.right- offsets.left;
    var height = offsets.bottom- offsets.top;
    alert("x: "+top+",y: "+left+",w: "+width+",h: "+height);
}