JSFiddle - React, Tailwind, and code Playground

HTML

<div id="map"></div>
<script src="https://maps.googleapis.com/maps/api/js"></script>

CSS

body {
  margin: 0;
}

#map {
  height: 100vh;
}

JavaScript

const markerData = [
  { coord: { lat: 55.65, lng: 37.51 }, text: 'hello, world!!' },
  { coord: { lat: 55.79, lng: 37.72 }, text: 'fuck the world' },
  { coord: { lat: 55.58, lng: 37.68 }, text: 'fuck everything' },
].map((n, i) => ({ id: i + 1, ...n }));

const info = new google.maps.InfoWindow();

let map = null;

google.maps.event.addDomListener(window, 'load', function() {
  map = new google.maps.Map(document.getElementById('map'), {
    zoom: 10,
    center: { lat: 55.7, lng: 37.6 },
  });

  markerData.forEach(n => {
    const marker = new google.maps.Marker({
      position: n.coord,
      map,
      id: n.id,
    });
    marker.addListener('click', onClick);
  });
});

function onClick() {
  const { id, position } = this;
  info.open(map);
  info.setPosition(position);
  info.setContent(`loading marker #${id} info...`);

  // имитируем задержку при запросе данных
  setTimeout(() => {
    info.setContent(markerData.find(n => n.id === id).text);
  }, Math.random() * 1000 | 0)
}