JSFiddle - React, Tailwind, and code Playground

by iamjpg

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<input type="text" id="location_search_field" name="location_search_field" placeholder="Type Stuff...">

<div id="location_results">

</div>

<div id="map">

</div>

<script src="//maps.google.com/maps/api/js?key=AIzaSyDciDh5LCPwyxG8tml6998d80mlukEj8Q4&libraries=drawing,places,geometry"></script>

CSS

body {
  padding: 50px;
}

input {
  padding: 10px;
  width: 100%;
}

#location_results {
  width: calc(100% + 20px);
  max-height: 400px;
  overflow: auto;
  background: #fff;
}

#location_results div {
  padding: 10px;
  border-bottom: 1px solid #dcdcdc;
}

#map {
  position: absolute;
  bottom: 0;
  right: 0;
  left: 0;
  height: calc(100% - 50%);
}

JavaScript

// Init the map
var map = new google.maps.Map(document.getElementById('map'), {
  center: {
    lat: 39.14,
    lng: -98.1,
  },
  zoom: 4,
});

var service = new google.maps.places.AutocompleteService();

function callback(res) {
  var elem = document.querySelector('#location_results');
  elem.innerHTML = '';
  res.forEach(function(o, i) {
  	elem.innerHTML += '<div>' + o.description + '</div>';
  })
}

document.querySelector('#location_search_field').onkeyup = function() {
	if (document.querySelector('#location_search_field').value === '') {
  	document.querySelector('#location_results').innerHTML = '';
  	return false;
  }
  var request = {
    input: document.querySelector('#location_search_field').value,
    componentRestrictions: {
      country: ['us', 'mx']
    },
  };
  service.getPlacePredictions(request, callback);
}