JSFiddle - React, Tailwind, and code Playground

by abuhamzah

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script src="https://maps.googleapis.com/maps/api/js?libraries=places"></script>
<div id="map_canvas"></div>
<div class="container frame">
    <div id="locationField">
        <label for="field_autocomplete">Autocomplete Search</label>
        <input id="field_autocomplete" name="field_autocomplete" type="text" placeholder="Location Search" onFocus="geolocate()" />
        <div class="row">
            <div class="col-sm-4">
                <label for="field_street_number">Street Number</label>
                <input id="field_street_number" type="text" />
            </div>
            <div class="col-sm-4">
                <label for="field_route">Route</label>
                <input id="field_route" type="text" />
            </div>
            <div class="col-sm-4">
                <label for="field_locality">City</label>
                <input id="field_locality" type="text" />
            </div>
        </div>
        <div class="row">
            <div class="col-sm-4">
                <label for="field_administrative_area_level_1">State</label>
                <input id="field_administrative_area_level_1" type="text" />
            </div>
            <div class="col-sm-4">
                <label for="field_postal_code">Zipcode</label>
                <input id="field_postal_code" type="text" />
            </div>
            <div class="col-sm-4">
                <label for="field_country">Country</label>
                <input id="field_country" type="text" />
            </div>
        </div>
        <div class="row">
            <div class="col-sm-6">
                <label for="field_latitude">Latitude</label>
                <input id="field_latitude" type="text" />
            </div>
            <div class="col-sm-6">
                <label for="field_longitude">Longitude</label>
                <input id="field_longitude" type="text" />
           ...

CSS

body {
    background: #B04D4F;
}
.frame {
    padding-top: 25px;
}
input[type="text"] {
    height: 40px;
    padding: 5px 10px;
    width: 100%;
    margin-bottom: 10px;
    border: 2px solid #fff;
    color: #1c1c1c;
}
label {
    color: #fff;
}
#map_canvas {
    width: 100%;
    height: 300px;
    margin: 0px 0;
}

JavaScript

function geocodeLatLng(e,map,marker) {
    
    	var lat= e.latLng.lat();
        var lng= e.latLng.lng();
    
    	var geocoder = new google.maps.Geocoder;
  		var infowindow = new google.maps.InfoWindow;
        //var latlngStr = input.split(',', 2);
  		var latlng = {lat: parseFloat(lat), lng: parseFloat(lng)};
        geocoder.geocode({'location': latlng}, function(results, status) {
            if (status === google.maps.GeocoderStatus.OK) {
                infowindow.setContent(results[1].formatted_address);
        		infowindow.open(map, marker);
            }
        });
    
}    
function initialize() {

    var placeSearch, autocomplete;
    var infowindow;
    
    var componentForm = {
        street_number: 'long_name',
        route: 'long_name',
        locality: 'long_name',
        administrative_area_level_1: 'long_name',
        country: 'long_name',
        postal_code: 'long_name'
    };

    var mapOptions = {
        center: new google.maps.LatLng(41.877461, -87.638085),
        zoom: 13,
        mapTypeId: google.maps.MapTypeId.ROADMAP,
        scrollwheel: false,
        disableDefaultUI: true,
        streetViewControl: false,
        panControl: false,
        zoomControl: true,  zoomControlOptions: {
      		style: google.maps.ZoomControlStyle.SMALL
    	}
    };

    var map = new google.maps.Map(document.getElementById('map_canvas'),mapOptions);

    var input = /** @type {HTMLInputElement} */
    (document.getElementById('field_autocomplete'));

    var autocomplete = new google.maps.places.Autocomplete(input);
    autocomplete.bindTo('bounds', map);

    

    var marker = new google.maps.Marker({
        map: map,
        anchorPoint: new google.maps.Point(0, -29)
    });

 	google.maps.event.addListener(map, 'click', function(e) 
	{
  		var lat= e.latLng.lat();
        var lng= e.latLng.lng();
        
        var geocoder = new google.maps.Geocoder;
        //geocodeLatLng(e,map,marker,geocoder);
        
         var geocoder...