JSFiddle - React, Tailwind, and code Playground

by sebababi

HTML

<script src="http://maps.google.com/maps/api/js?sensor=false&amp;libraries=places&amp;extension=.js"></script>
<form name="formControls">
  <div id="keywordField">
    <input id="keyword" type="text" value="mexican" />
  </div>
  <div id="controls">

    restaurant
    <input type="checkbox" name="type" value="restaurant" onclick="search()" id="restaurant" checked/>
      lodging
    <input type="checkbox" name="type" value="lodging" onclick="search()" id="lodging"checked/>



    <select id="rankBy">
      <option value="prominence">Prominence</option>
      <option value="distance">Distance</option>
    </select>
  </div>
  
     </form>
     
     
  <div id="map_canvas"></div>
  <div id="listing"><table id="resultsTable"><tbody id="results"></tbody></table></div>
  <div id="iconCredit">Numbered icons courtesy of Nicolas Mollet's awesome <a href="http://mapicons.nicolasmollet.com">Maps Icons Collection</a></div>

CSS

body {
  font-family: sans-serif;
  font-size: 14px;
  margin:0; 
  padding:0;
}
table {
  font-size: 12px;
}
#map_canvas {
  position: absolute;
  width: 440px;
  height: 440px;
  top: 28px;
  left: 0;
  border: 1px solid grey;
}
#listing {
  position: absolute;
  width: 200px;
  height: 440px;
  overflow: auto;
  left: 442px;
  top: 28px;
  cursor: pointer;
  overflow-x: hidden;
  border: 1px solid lightgrey;
}
#controls {
  position: absolute;
  top: 0;
  left: 300px;
  width: 346px;
  text-align: right;
  padding-top: 2px;
}
#keywordField {
  width: 220px;
  height: 25px;
  top: 0;
  left: 78px;
  position: absolute;
}
#keyword {
  width: 100%;
}
.placeIcon {
  width: 32px;
  height: 37px;
  margin: 4px;
}
.hotelIcon {
  width: 24px;
  height: 24px;
}
#resultsTable {
  border-collapse: collapse;
  width: 240px;
}
#rating {
  font-size: 13px;
  font-family: Arial Unicode MS;
}
#keywordsLabel {
  text-align: right;
  width: 70px;
  font-size: 14px;
  padding: 4px;
  position: absolute;
}
.iw_table_row {
  height: 18px;
}
.iw_attribute_name {
  font-weight: bold;
  text-align: right;
}
#iconCredit {
  position: absolute;
  top: 472px;
  left: 0;
  font-size: 11px;
  text-align: right;
  width: 640px;
  font-style: italic;
}

JavaScript

var map, places, iw;
  var markers = [];
  var searchTimeout;
  var centerMarker;
  var autocomplete;
  var hostnameRegexp = new RegExp('^https?://.+?/');

  function initialize() {
    var myLatlng = new google.maps.LatLng(37.786906,-122.410156);
    var myOptions = {
      zoom: 15,
      center: myLatlng,
      mapTypeId: google.maps.MapTypeId.ROADMAP
    }
    map = new google.maps.Map(document.getElementById('map_canvas'), myOptions);
    places = new google.maps.places.PlacesService(map);
    google.maps.event.addListener(map, 'tilesloaded', tilesLoaded);
    
    document.getElementById('keyword').onkeyup = function(e) {
      if (!e) var e = window.event;
      if (e.keyCode != 13) return;
      document.getElementById('keyword').blur();
      search(document.getElementById('keyword').value);
    }


    

    var rankBySelect = document.getElementById('rankBy');
    rankBySelect.onchange = function() {
      search();
    };

  }
  
  function tilesLoaded() {
    search();
    google.maps.event.clearListeners(map, 'tilesloaded');
    google.maps.event.addListener(map, 'zoom_changed', searchIfRankByProminence);
    google.maps.event.addListener(map, 'dragend', search);
  }
  
  function searchIfRankByProminence() {
    if (document.getElementById('rankBy').value == 'prominence') {
      search();
    }    
  }



  function search() {
    clearResults();
    clearMarkers();

    if (searchTimeout) {
      window.clearTimeout(searchTimeout);
    }
    searchTimeout = window.setTimeout(reallyDoSearch, 500);
  }
  
  function reallyDoSearch() {      
    // var type = document.getElementById('type').value;
    var keyword = document.getElementById('keyword').value;
    var rankBy = document.getElementById('rankBy').value;
  
    var search = {};
    
    if (keyword) {
      search.keyword = keyword;
    }
    
      
       var type=[];
    for (var i = 0; i < document.formControls.type.length; i++){
        if (document.formControls.type[i].checked){  
   ...