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="https://raw.github.com/ubilabs/geocomplete/master/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;
	}

JavaScript

$(document).ready(function() {
	
	$('#select').change(function() {
		if ($(this).val() == 'layer1') {
			$('#layer1').show(); 
			$('#layer2').hide();
		} else {
			$('#layer1').hide(); 	
			$('#layer2').show();
		}
	});	
	
});