JSFiddle - React, Tailwind, and code Playground

HTML

<div id="map" class="map"></div>
<!--
Remember to insert your own YOUR_API_KEY

Nezapomeňte doplnit váš YOUR_API_KEY
-->
<script async defer src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap">

</script>

CSS

.map { height: 400px; }

JavaScript

function initMap() {
  var center = {lat: 49, lng: 14};
  var map = new google.maps.Map(document.getElementById('map'), {zoom: 10, center: center});
  var pinSVGHole = "M12,11.5A2.5,2.5 0 0,1 9.5,9A2.5,2.5 0 0,1 12,6.5A2.5,2.5 0 0,1 14.5,9A2.5,2.5 0 0,1 12,11.5M12,2A7,7 0 0,0 5,9C5,14.25 12,22 12,22C12,22 19,14.25 19,9A7,7 0 0,0 12,2Z";
  var icon = {
    path: pinSVGHole,
    anchor: new google.maps.Point(12,17),
    fillOpacity: 1,
    fillColor: "green",
    strokeWeight: 2,
    strokeColor: "black",
    scale: 1.5,
    labelOrigin: new google.maps.Point(12,9)
  };
  var markers = {
  }
  for (var i = 1; i < 6; i++) {
    var mul = 2 == i ? 1.1 : i;
    var m = new google.maps.Marker({
      position: {lat: 49, lng: 13.8 + mul*0.1},
      optimized: false,
      value: 160,
      map: map,
      icon: icon
    });
    m.addListener("click", function (e) {
      console.log("Value on the clicked marker: ", this.value);
    });
    markers[i] = m;
  }
  function updateMarkers() {
    var m = markers[Math.floor(Math.random() * 5) + 1];
    var icon = m.getIcon();
    m.value = Math.floor(Math.random() * 300);
    icon.rotation = 0;
    var zindex = 1;
    if (m.value < 75) {
      icon.fillColor = "red";
      icon.rotation = 90;
      zindex = 5;
    } else if (m.value < 150) {
      icon.fillColor = "orange";
      zindex = 4;
    } else if (m.value > 200) {
      icon.fillColor = "blue";
      zindex = 3;
    } else {
      icon.fillColor = "green";
    }
    m.setIcon(icon);
    m.setZIndex(zindex);
    m.setTitle("Value: " + m.value);
  }
  setInterval(updateMarkers, 1000);
}