JSFiddle - React, Tailwind, and code Playground

by jlspake

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.5.0/knockout-min.js"></script>
<div width="300px">
  <span class="text">Enter City Name to locate your Bank </span>
  <input id="places-search" type="text" placeholder="Ex: Enter the City ">

</div>

<hr>
<div>
  <h3>Bank List</h3>
  <ul data-bind="foreach: filteredBank ">
    <li><a href="#" data-bind="text: name"></a></li>
  </ul>
</div>



<!-- Table list on the side of the map -->
<div id="map"></div>

JavaScript

// Declare function contain object info as a storage for json items
function locationInfo(info) {
  var self = this;
  self.name = info.name;
  self.location = info.location;
  self.photo = info.photos;
  self.contact = info.contact;
  self.id = info.id;
  self.categories = info.categories;
  self.address = info.location.formattedAddress;

}




function ViewModel() {

  var self = this;

  // Constructor creates a new map - only center and zoom are defined.
  self.map = new google.maps.Map(document.getElementById('map'), {
    center: {
      lat: 32.7761827,
      lng: -96.7995296
    },
    zoom: 11

  });
  /*  
    self.infowindow = new google.maps.InfoWindow({
      content: document.getElementById('popupinfo')
      });
  */
  // declare infowindow instances **
  self.largeInfowindow = new google.maps.InfoWindow();
  self.bounds = new google.maps.LatLngBounds();
  //
  autocomplete = new google.maps.places.Autocomplete((document.getElementById('places-search')), {
      types: ['(cities)']
    }

  );
  self.places = new google.maps.places.PlacesService(self.map);
  google.maps.event.addListener(autocomplete, 'place_changed', searchBoxPlaces);

  // Using google street view
  self.streetViewService = new google.maps.StreetViewService();
  // defined radius for 50 miles
  self.radius = 50;

  // define the location array using knockout observable array
  self.locations = ko.observableArray([]);

  // define markers for each location using knockout obseravble array
  self.markers = ko.observableArray([]);

  // define filter input text using knockout observable function
  self.filter = ko.observable();
  // self.cityName = document.getElementById('places-search').value;



  function searchBoxPlaces() {

    self.place = autocomplete.getPlace();
    if (self.place.length == 0) {
      window.alert('We did not find any places matching that search!');
    } else {
      // For each place, get the icon, name and location.
     ...