JSFiddle - React, Tailwind, and code Playground

by SaulBurgos

HTML

<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>
<div id="map">22</div>

CSS

#map {
    width:500px;
    height:500px;
    border: 1px solid black;
}

#map .container {
	margin: 0 auto;
	width:180px;
	padding: 6px;
	box-sizing: border-box;
	z-index:1;
}

#map  .customControl {
	padding: 5px;
	box-shadow: 1px 2px 3px 2px rgba(0, 0, 0, 0.58);
	background-color: rgb(76, 236, 102);
	color: white;
	text-shadow: 1px 1px 1px black;
}

JavaScript

//document ready wait until the page is loaded
$(document).ready(function(){

	$('#map').on('click','#saveForm',function(){
		$('.gm-style').removeClass();
	});
	
	//obj with option 
	var mapOptions = {
		center: new google.maps.LatLng(-34.397, 150.644),
		zoom: 8,
		mapTypeId: google.maps.MapTypeId.ROADMAP
	};
	/*html String*/
	var htmlForm = '<div class="customControl">' + 
			'<div>' + 
				'<b>Place Name</b>' +
				'<input type="text" />' + 
			'</div>' + 
			'<hr>' + 
			'<div>' + 
				'<b>Rooms</b>' + 
				'<input type="number" name="quantity" min="1" max="10">' + 
			'</div>' + 
			'<hr>' + 
			'<div>' + 
				'<b>Activity</b><br>' + 
				'<input type="radio" name="activity" value="male" checked>Rent' + 
				'<input type="radio" name="activity" value="female">Sell' + 
			'</div>' + 
			'<hr>' + 
			'<div>' + 
				'<b>Description</b><br>' + 
				'<textarea rows="4" cols="16"></textarea>' +
			'</div>' + 
			'<input type="checkbox" name="call" value="money">Only adults' + 
			'<button id="saveForm">Remove style</button>' + 
		'</div>';
		
	var controlDiv = document.createElement('div');
	controlDiv.className = 'container';
	//add the form to the container Div
	$(controlDiv).append(htmlForm);	
	//create a instance 
	var map = new google.maps.Map(document.getElementById("map"), mapOptions);	
	//add the form to array of control
	map.controls[google.maps.ControlPosition.RIGHT_CENTER ].push(controlDiv);	
	
 });