JSFiddle - React, Tailwind, and code Playground

by Gorotto

HTML

<script src="https://maps.google.com/maps/api/js?sensor=false"></script>

<div class="map__buttons">
  <button onclick="filterMarkers('classic')"> <span>Классика</span></button>
  <button onclick="filterMarkers('individual')"> <span>Премиум</span></button>
  <button onclick="filterMarkers('lowcoster')"> <span>Эконом</span></button>
  <button onclick="filterMarkers('one')"><span>Монокресельный формат</span></button>
</div>
          <div id="map-canvas"></div>

CSS

#map-canvas {
  width: 100%;
  height: 406px;
  margin-top: 100px; }

.map__buttons {
  width: 100%;
  display: -ms-flex;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-flow: row wrap;
          flex-flow: row wrap; }

JavaScript

var gmarkers1 = [];
  var markers1 = [];
/*   var infowindow = new google.maps.InfoWindow({
      content: ''
  }); */

  // Our markers
  markers1 = [
      ['0', '<span class="city">Москва и Подмосковье</span>', 55.684578602223,  37.299261771164, 'classic'],
      ['1', 'Title', 55.763945799824, 37.616280192198, 'individual', 52.5, 4],
      ['2', 'Title', 52.4555687, 5.039231599999994, 'lowcoster', 52.6, 4],
      ['3', 'Title', 52.4555687, 5.029231599999994, 'one', 52.7, 4]
  ];
  // Info Window Content
var infoWindowContent = [
    ['<div class="info_content">' +
    '<h3>Mumbai</h3>' +
    '<p>Lorem Ipsum  Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum</p>' +'</div>'],
    ['<div class="info_content">' +
    '<h3>Pune</h3>' +
    '<p>Lorem Ipsum  Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum</p>' +'</div>'],
    ['<div class="info_content">' +
    '<h3>Bhopal</h3>' +
    '<p>Lorem Ipsum  Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum</p>' +'</div>'],  
    ['<div class="info_content">' +
    '<h3>Agra</h3>' +
    '<p>Lorem Ipsum  Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum</p>' +'</div>'],
];

var infoWindow = new google.maps.InfoWindow(), marker1, i;
  /**
   * Function to init map
   */

  function initialize() {
      var center = new google.maps.LatLng(55.731714493237, 37.56797370581);
      var mapOptions = {
          zoom: 10,
          center: center,
          mapTypeId: google.maps.MapTypeId.ROADMAP,
         
      };

      map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
      for (i = 0; i < markers1.length; i++) {
          addMarker(markers1[i]);
      }
  }

  /**
   * Function to add marker to map
   */

  function addMarker(marker) {
      var category = marker[4];
      var title = marker[1];
      var pos = new google.maps.LatLng(marker[2], marker[3]);
      var content = marker[1];
      var centroLat = marker[5];
      var centroLon = marker[6];

      marker1 = new google.maps.Marker({
         ...