JSFiddle - React, Tailwind, and code Playground

by andrey90vs

HTML

<script src="http://maps.google.com/maps/api/js?libraries=places&amp;language=en&amp;sensor=false"></script>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
<!-- Start venue-form -->
			<div class="venue_box">
				<i class="fa fa-times-circle-o close_btn"></i>
				<div class="venue_box_title">
					[Share Venue Details]
					<span>
						Lorem ipsum copy letting DSMs know that we will
						need to know the venue details or if the DSM will
						need help securing a venue.
					</span>
				</div>
				<p>
					<label for="venue_loc_name">Location Name</label>
					<input id="venue_loc_name" class="default_input" placeholder="Enter name" />
				</p>
				<p>
					<label for="venue_loc_place">Location</label>
					<input id="autocomplete" class="default_input" placeholder="Enter address" value=" " />
					<div id="map_canvas" class="venue_map_place"></div>
				</p>
				<p>
					<label for="date_mm">Date</label>
					<input id="date_mm" class="small_inp" placeholder="MM" /> / <input id="date_dd" class="small_inp" placeholder="DD" maxlength="2" /> / <span class="date_year">2014</span>
				</p>
				<p>
					<div>
						<label for="time_hh">Start Time</label>
						<input id="start_time_hh" class="small_inp" placeholder="HH" maxlength="2" /> : <input id="start_time_mm" class="small_inp" placeholder="MM" maxlength="2" /> 
						<div class="am_pm">
							<div class="btn-group">
								<div type="button" class="btn btn-default"> 
									<span class="time_am_pm">AM</span>
								</div>
								<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown"> 
									<span class="caret"></span>
								</button>
								<div class="dropdown-menu...

SCSS

.btn_default {
	width: auto;
	font-size: 16px;
	border-radius: 5px;
	padding: 5px 10px;
}

.venue_box {
	display: block;
	position: relative;
	max-width: 60%;
	min-width: 430px;
	height: auto;
	margin: 0 auto;
	background-color: rgba(255,255,255,1);
	padding: 50px 30px;
	border-radius: 5px;
}
.close_btn {
	position: absolute;
	top: 2px;
	right: 2px;
	font-size: 30px;
	cursor: pointer;
}
.venue_box_title {
	display: block;
	width: 100%;
	height: auto;
	font-size: 34px;
	font-weight: bolder;
	text-align: center;
	span{
		font-size: 12px;
		font-weight: normal;
		display:block;
	}
}
.venue_box p {
	width: 100%;
	height: auto;
}
.venue_box p label {
	width: 100%;
	height: auto;
}
.default_input {
	width: 100%;
	height: 40px;
	border-radius: 5px;
	text-indent: 10px;
	outline: none;
}
.pac-container {
	border:1px solid #000;
}
.pac-container:after{
	content:none !important;
}
.pac-item {
	border-bottom: 1px solid #000;
	padding: 10px 10px;
	&:nth-child(n+4) {
		display: none;
	}
	&:nth-child(3) {
		border-bottom: none;
	}
	&:hover {
		background-color: rgba(0,0,0,0.2);
		cursor: pointer;
	}
}
.pac-icon {
	display: none;
}
#map_canvas {
	display: block;
	position: absolute;
	margin: 0 auto;
	width : 80%; 	/* map width */
	height: 180px;	/* map height */
	border: 1px solid #000;
	opacity: 0;
	pointer-events: none;
	transition: all .2s ease-in;
}
.gmnoprint a, .gmnoprint span {
	display: none;
}
.gmnoprint div {
	background: none !important;
}
#GMapsID div div a div img{
	display: none;
}
.gm-style div:nth-child(2) {
	display: none;
}

.small_inp {
	display: inline-block;
	max-width: 50px;
	height: 40px;
	border-radius: 10px;
	border: 1px solid #ccc;
	background-color: rgba(0,0,0, 0.1);
	outline: none;
	text-align: center;
	margin:0 5px;
	&:first-of-type {
		margin-left: 0;
	}
}
.am_pm {
	display: inline-block;
}
label{
	display: block;
}
.dropdown-menu {
	min-width: inherit;
	padding: 5px 5px;
	left: 8px;
	div {
		margin: 2px 0px;
		cursor: pointer;
		padding: 0px...

JavaScript

'use strict';
$(document).ready(function(){

	$(function(){
		var lat = -33.8688,
			lng = 151.2195,
			latlng = new google.maps.LatLng(lat, lng);
			 
		var mapOptions = {
				center: new google.maps.LatLng(lat, lng),
				zoom: 13,
				mapTypeId: google.maps.MapTypeId.ROADMAP,
				disableDefaultUI: true
			},
			map = new google.maps.Map(document.getElementById('map_canvas'), mapOptions),
			marker = new google.maps.Marker({
				position: latlng,
				map: map,
				title: 'Hello World!'
			});

		google.maps.event.addDomListener(window, "resize", function() {
			var center = map.getCenter();
			google.maps.event.trigger(map, "resize");
			map.setCenter(center); 
		});

		var input = document.getElementById('autocomplete');
		var autocomplete = new google.maps.places.Autocomplete(input, {
			types: ['geocode']
		});
		
		autocomplete.bindTo('bounds', map);
		var service = new google.maps.places.PlacesService(map)

		google.maps.event.addListener(autocomplete, 'place_changed', function() {
			var place = autocomplete.getPlace();
			if (place.geometry.viewport) {
				map.fitBounds(place.geometry.viewport);
			} else {
				map.setCenter(place.geometry.location);
				map.setZoom(17);
			}
			
			moveMarker(place.geometry.location);
		});
		
		function moveMarker(latlng){
			marker.setPosition(latlng);
			$('#map_canvas').css({ 'position':'relative', 'opacity':'1', 'pointer-events':'all' });
		}
	});

	$('.set_am_pm div').on('click', function(){
		var val = $(this).text();
		$(this).parent().parent().find('.time_am_pm').html(val);
	})
});