JSFiddle - React, Tailwind, and code Playground

by Lawrence Ross

HTML

<script src="https://maps.googleapis.com/maps/api/js?libraries=geometry,places&amp;ext=.js"></script>
<script src="//cdn.jsdelivr.net/isotope/2.0.0/isotope.pkgd.min.js"></script>
<script src="https://developers.google.com/maps/documentation/javascript/examples/markerclusterer/markerclusterer.js"></script>
<section id="vendo-search-field">
  <div class="container-fluid">
    <div class="row vendo-map">
      <div class="col-md-6" style="padding-right:0;">
        <!--start col-->
        <div id="map"></div>
      </div>
      <!--end col-->
      <div class="col-md-6" style="padding-left:0;">
        <!--start col-->
        <div class="map-nav-holder">
          <!--start map-nav-holder-->
          <div class="form-group map-nav">
            <!--start map-nav-->
            <!--         <button class="btn btn-default">Alle
            </button> -->
            <div class="select-group" data-filter-group="branchen">
              <select class="custom-select form-control  item-filter-select">
                <option data-value="*" selected='selected'>Alle Branchen</option>
                <option data-value=".a">a Schmuck & Uhren</option>
                <option data-value=".b">b Restaurants</option>
                <option data-value=".c">c Schreibwaren & Papeterie</option>
              </select>
            </div>
            <div class="select-group" data-filter-group="marken">
              <select class="custom-select form-control item-filter-select">
                <option data-value="*" selected='selected'>Alle Marken</option>
                <option data-value=".nike">Nike</option>
                <option data-value=".adidas">Adidas</option>
                <option data-value=".puma">Puma</option>
              </select>
            </div>
          </div>
          <!--end map-nav-->

          <div class="shop-profile-holder">
            <div class="isotope-index">
              <div class="isotope-listing b nike adidas puma">
                <img...

CSS

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

section #vendo-search-field {
  background: #ddd;
  height: 400px;
}

.vendo-map {
  height: 400px;
}

#map {
  height: 500px;
}

.map-nav-holder {
  position: relative;
  width: 100%;
  height: 500px;
}

.map-nav {
  position: absolute;
  width: 100%;
  z-index: 2;
}

.shop-profile-holder {
  position: relative;
  top: 35px;
  height: calc(100% - 35px);
  overflow-y: scroll;
}

.shop-profile {
  width: 100%;
  height: 100px;
  background: #fff;
  border-bottom: 1px solid #ddd;
}

.select-group {
  float: left;
  width: 50%;
}

.map-nav select {
  float: left;
  width: 100%;
}

.map-nav .btn {
  border-radius: 0;
  float: left;
  width: 10%;
}

select:not([multiple]) {
  border-radius: 0;
  -webkit-appearance: none;
  -moz-appearance: none;
  background-position: right 50%;
  background-repeat: no-repeat;
  background-image:...

JavaScript

//https://developers.google.com/maps/documentation/javascript/examples/layer-kml-features
$(document).ready(function() {
  initMap();
});
var locations = []
var data
var markerData

$('.map').each(function(get) { //gather data from html and store
  data = $(this).data();
  markerData = ([data.txt, data.lat, data.lng])
  locations.push(markerData);
});

function initMap() {

  var infowindow = new google.maps.InfoWindow(); /* SINGLE */
  var map = new google.maps.Map(document.getElementById('map'), {
    zoom: 14,
    center: {
      lat: 50.07821,
      lng: 8.23976
    }
  });

  // Create an array of alphabetical characters used to label the markers.
  var labels = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ';

  // Add some markers to the map.
  // Note: The code uses the JavaScript Array.prototype.map() method to
  // create an array of markers based on a given "locations" array.
  // The map() method here has nothing to do with the Google Maps API.
  var markers = locations.map(function(loc, i) {
    var marker = new google.maps.Marker({
      position: new google.maps.LatLng(loc[1], loc[2]),
      animation: google.maps.Animation.DROP,
      label: labels[i % labels.length]

    });
    console.log("loc[0]="+loc[0])
    google.maps.event.addListener(marker, 'click', (function(loc) {
    return function(evt) {
      console.log('hit')
      infowindow.close(); // Close previously opened infowindow
      infowindow.setContent("<div id='infowindow'>" + loc[0] + "</div>");
      console.log("loc[0]="+loc[0])
      infowindow.open(map, marker);
    }}(loc)));
    return marker

  });

  // Add a marker clusterer to manage the markers.
  var markerCluster = new MarkerClusterer(map, markers, {
    imagePath: 'https://developers.google.com/maps/documentation/javascript/examples/markerclusterer/m'
  });


}







// this part for isotope
var $grid = $('.isotope-index').isotope({
  itemSelector: '.isotope-listing',
  stagger: 300,
  getSortData: {
    name: 'h5'
  },
  sortBy:...