JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html>
<html>
  <head>
    <title>Locator</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <script src="https://polyfill.io/v3/polyfill.min.js?features=default"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/handlebars/4.7.7/handlebars.min.js"></script>
    <link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
    <script>
      const CONFIGURATION = {
        "locations": [
          {"title":"Frontier Harley-Davidson","address1":"205 NW 40th St","address2":"Lincoln, NE 68528, USA","coords":{"lat":40.81525185943273,"lng":-96.77882300674591},"placeId":"ChIJQc7kLe_AlocRcP3mMPr_MrA"},
          {"title":"Zylstra Harley-Davidson","address1":"1930 E 13th St","address2":"Ames, IA 50010, USA","coords":{"lat":42.034180062412176,"lng":-93.5866967067459},"placeId":"ChIJgSyeZBtw7ocRD34R4RaL3Pg"},
          {"title":"Frontier Harley-Davidson Outpost","address1":"2719 S Locust St","address2":"Grand Island, NE 68801, USA","coords":{"lat":40.895202899999994,"lng":-98.33896623558196},"placeId":"ChIJh2PButmFmYcRWqQ_kOxGx2E"},
          {"title":"American Lifestyle","address1":"Westpoort 66","address2":"2070 Zwijndrecht, Belgium","coords":{"lat":51.20623792181971,"lng":4.328048064418022},"placeId":"ChIJgWodyVCRw0cRvY27155RU4g"},
          {"title":"Fraussen - Harley-Davidson","address1":"Bosdel 49","address2":"3600 Genk, Belgium","coords":{"lat":50.94974044081386,"lng":5.481700364418036},"placeId":"ChIJO-ZhCiPfwEcROX-opOvK9-I"},
          {"title":"Silver Lake Harley-Davidson","address1":"Winkelom 85","address2":"2440 Geel, Belgium","coords":{"lat":51.145981408175274,"lng":5.000772106745921},"placeId":"ChIJcwyqFnBJwUcRoBBncc6pYVw"},
          {"title":"Harley-Davidson Gent","address1":"Xavier de Cocklaan 84","address2":"9831 Sint-Martens-Latem, Belgium","coords":{"lat":51.00357499999999,"lng":3.61985252209013},"placeId":"ChIJSd2hX5ttw0cR71VK1zwD27c"},
         ...

CSS

html,
body {
  height: 100%;
  margin: 0;
  padding: 0;
}

#map-container {
  width: 100%;
  height: 100%;
  position: relative;
  font-family: "Roboto", sans-serif;
  box-sizing: border-box;
}

#map-container a {
  text-decoration: none;
  color: #1967d2;
}

#map-container button {
  background: none;
  color: inherit;
  border: none;
  padding: 0;
  font: inherit;
  font-size: inherit;
  cursor: pointer;
}

#gmp-map {
  position: absolute;
  left: 22em;
  top: 0;
  right: 0;
  bottom: 0;
}

#locations-panel {
  position: absolute;
  left: 0;
  width: 22em;
  top: 0;
  bottom: 0;
  overflow-y: auto;
  background: white;
  padding: 0.5em;
  box-sizing: border-box;
}

@media only screen and (max-width: 876px) {
  #gmp-map {
    left: 0;
    bottom: 50%;
  }

  #locations-panel {
    top: 50%;
    right: 0;
    width: unset;
  }
}

#locations-panel-list > header {
  padding: 1.4em 1.4em 0 1.4em;
}

#locations-panel-list h1.search-title {
  font-size: 1em;
  font-weight: 500;
  margin: 0;
}

#locations-panel-list h1.search-title > img {
  vertical-align: bottom;
  margin-top: -1em;
}

#locations-panel-list .search-input {
  width: 100%;
  margin-top: 0.8em;
  position: relative;
}

#locations-panel-list .search-input input {
  width: 100%;
  border: 1px solid rgba(0, 0, 0, 0.2);
  border-radius: 0.3em;
  height: 2.2em;
  box-sizing: border-box;
  padding: 0 2.5em 0 1em;
  font-size: 1em;
}

#locations-panel-list .search-input-overlay {
  position: absolute;
}

#locations-panel-list .search-input-overlay.search {
  right: 2px;
  top: 2px;
  bottom: 2px;
  width: 2.4em;
}

#locations-panel-list .search-input-overlay.search button {
  width: 100%;
  height: 100%;
  border-radius: 0.2em;
  color: black;
  background: transparent;
}

#locations-panel-list .search-input-overlay.search .icon {
  margin-top: 0.05em;
  vertical-align: top;
}

#locations-panel-list .section-name {
  font-weight: 500;
  font-size: 0.9em;
  margin: 1.8em 0 1em 1.5em;
}

#locations-panel-list...

JavaScript

'use strict';

/** Hide a DOM element. */
function hideElement(el) {
  el.style.display = 'none';
}

/** Show a DOM element that has been hidden. */
function showElement(el) {
  el.style.display = 'block';
}

/** Helper function to generate a Google Maps directions URL */
function generateDirectionsURL(origin, destination) {
  const googleMapsUrlBase = 'https://www.google.com/maps/dir/?';
  const searchParams = new URLSearchParams('api=1');
  searchParams.append('origin', origin);
  const destinationParam = [];
  // Add title to destinationParam except in cases where Quick Builder set
  // the title to the first line of the address
  if (destination.title !== destination.address1) {
    destinationParam.push(destination.title);
  }
  destinationParam.push(destination.address1, destination.address2);
  searchParams.append('destination', destinationParam.join(','));
  return googleMapsUrlBase + searchParams.toString();
}

/**
 * Defines an instance of the Locator+ solution, to be instantiated
 * when the Maps library is loaded.
 */
function LocatorPlus(configuration) {
  const locator = this;

  locator.locations = configuration.locations || [];
  locator.capabilities = configuration.capabilities || {};

  const mapEl = document.getElementById('gmp-map');
  const panelEl = document.getElementById('locations-panel');
  locator.panelListEl = document.getElementById('locations-panel-list');
  const sectionNameEl =
      document.getElementById('location-results-section-name');
  const resultsContainerEl = document.getElementById('location-results-list');

  const itemsTemplate = Handlebars.compile(
      document.getElementById('locator-result-items-tmpl').innerHTML);

  locator.searchLocation = null;
  locator.searchLocationMarker = null;
  locator.selectedLocationIdx = null;
  locator.userCountry = null;

  // Initialize the map -------------------------------------------------------
  locator.map = new google.maps.Map(mapEl, configuration.mapOptions);

  // Store...