JSFiddle - React, Tailwind, and code Playground

by Nibin George

HTML

<script src="http://maps.googleapis.com/maps/api/js?libraries=places&amp;sensor=false&amp;ext=.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script>
<script src="http://xilinus.com/jquery-addresspicker/src/jquery.ui.addresspicker.js"></script>
<div class="demo">
  <div class='clearfix'>
    <div class='input input-positioned'>
      <label>Address : </label> <input id="addresspicker_map" />   <br/>
      <label>Locality: </label> <input id="locality" disabled=disabled> <br/>
      <label>District: </label> <input id="administrative_area_level_2" disabled=disabled> <br/>
      <label>State/Province: </label> <input id="administrative_area_level_1" disabled=disabled> <br/>
      <label>Country:  </label> <input id="country" disabled=disabled> <br/>
      <label>Postal Code: </label> <input id="postal_code" disabled=disabled> <br/>
      <label>Lat:      </label> <input id="lat" disabled=disabled> <br/>
      <label>Lng:      </label> <input id="lng" disabled=disabled> <br/>
      <label>Zoom:     </label> <input id="zoom" disabled=disabled> <br/>
      <label>Type:     </label> <input id="type" disabled=disabled /> <br/>
    </div>

    <div class='map-wrapper'>
      <label id="geo_label" for="reverseGeocode">Reverse Geocode after Marker Drag?</label>
     
      <div id="map"></div>
      <div id="legend">You can drag and drop the marker to the correct location</div>
    </div>
  </div>
</div><!-- End demo -->

CSS

body {
  margin:0 10%;
  color: #333;
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-size: 16px;
  font-style: normal;
  font-weight: 300;
}

h1 {
  text-align: center;
  font-weight:normal;
}

h2 {
  font-weight:normal;
  width:100%;
  float:left;
  margin: 20px 0  0px 0;
}

code {
  background-color: ghostWhite;
  border: 1px solid #DEDEDE;
  color: #444;
  padding: 0 3px;
}

label {
  width: 100px;
  float:left;
  text-align:right;
  margin:4px 10px 0 0;
}

label#geo_label
{
  width: auto;
  float: none;
}

p {
  float:left;
  width: 100%;
}
.gist {
  margin-top: 10px;
  font-size: 12px;
}

.ui-autocomplete-input, .input input {
  border: none; 
  font-size: 14px;
  width: 300px;
  height: 24px;
  margin-bottom: 5px;
  padding-top: 2px;
}

textarea
{
  border-color: lightgray; 
  font-size: 14px;
  width: 600px;
  margin-bottom: 5px;
  padding-top: 2px;
}

.ui-autocomplete-input {
  border: 1px solid #DDD !important;
  padding-top: 0px !important;
}

.map-wrapper
{
  float:left;  
  margin: 0 10px 0 10px;
}

#map {
  border: 1px solid #DDD; 
  width:300px;
  height: 300px;
  margin: 10px 0 10px 0;
  -webkit-box-shadow: #AAA 0px 0px 15px;
}

#legend {
  font-size: 12px;
  font-style: italic;
}

.ui-menu .ui-menu-item a {
  font-size: 12px;
}

.input {
  float:left;  
}

.input-positioned
{
  padding: 35px 0 0 0;
}

.clearfix:after {
	content: ".";
	display: block;
	clear: both;
	visibility: hidden;
	line-height: 0;
	height: 0;
}
 
* html .clearfix {
	height: 1%;
}

JavaScript

$(function () {
    var addresspicker = $("#addresspicker").addresspicker({
        componentsFilter: 'country:US'
    });
    var addresspickerMap = $("#addresspicker_map").addresspicker({
        regionBias: "us",
        updateCallback: showCallback,
        reverseGeocode:true,
        mapOptions: {
            zoom: 4,
            center: new google.maps.LatLng(37.09024,-95.712891),
            scrollwheel: false,
            mapTypeId: google.maps.MapTypeId.ROADMAP,
            reverseGeocode:true
        },
        elements: {
            map: "#map",
            lat: "#lat",
            lng: "#lng",
            street_number: '#street_number',
            route: '#route',
            locality: '#locality',
            administrative_area_level_2: '#administrative_area_level_2',
            administrative_area_level_1: '#administrative_area_level_1',
            country: '#country',
            postal_code: '#postal_code',
            type: '#type'
        }
    });

    var gmarker = addresspickerMap.addresspicker("marker");
    gmarker.setVisible(true);
    addresspickerMap.addresspicker("updatePosition");

    $('#reverseGeocode').change(function () {
        $("#addresspicker_map").addresspicker("option", "reverseGeocode", ($(this).val() === 'true'));
    });

    function showCallback(geocodeResult, parsedGeocodeResult) {
        $('#callback_result').text(JSON.stringify(parsedGeocodeResult, null, 4));
    }
    // Update zoom field
    var map = $("#addresspicker_map").addresspicker("map");
    google.maps.event.addListener(map, 'idle', function () {
        $('#zoom').val(map.getZoom());
    });

});