JSFiddle - React, Tailwind, and code Playground

HTML

<div id="map"></div>

<script async src="https://maps.googleapis.com/maps/api/js?callback=initialize"></script>

CSS

body {
  margin: 0;
}

#map {
  height: 100vh;
}

.info-window-content {
  color: red;
  font: bold 24px monospace;
  padding: 20px;
}

JavaScript

function initialize() {
  const markersData = [
    { lat: 47.649580, lng: 12.729179 },
    { lat: 47.651604, lng: 12.729351 },
    { lat: 47.654408, lng: 12.733771 },
    { lat: 47.652991, lng: 12.736346 },
    { lat: 47.645677, lng: 12.731711 },
    { lat: 47.653396, lng: 12.734286 },
    { lat: 47.648308, lng: 12.730209 },
    { lat: 47.654235, lng: 12.722398 },
    { lat: 47.647903, lng: 12.712142 },
    { lat: 47.644752, lng: 12.718536 },
  ].map((n, i) => ({ position: n, content: `${i}`.repeat(5) }));

  const icon = 'http://icons.iconarchive.com/icons/icons-land/vista-map-markers/64/Map-Marker-Marker-Outside-Pink-icon.png';
  const iconActive = 'http://icons.iconarchive.com/icons/icons-land/vista-map-markers/64/Map-Marker-Marker-Outside-Chartreuse-icon.png';

  const map = new google.maps.Map(document.getElementById('map'), {
    zoom: 15,
    center: markersData[0].position,
    mapTypeControl: false,
    streetViewControl: false,
    fullscreenControl: false,
  });

  const setActiveIcon = marker => markers.forEach(n => n.setIcon(n === marker ? iconActive : icon));

  const infoWindow = new google.maps.InfoWindow();
  infoWindow.addListener('closeclick', () => setActiveIcon(null));

  const markers = markersData.map(({ position, content }) => {
    const marker = new google.maps.Marker({ position, map, icon });

    marker.addListener('click', () => {
      setActiveIcon(marker);
      infoWindow.setContent(`<div class="info-window-content">${content}</div>`);
      infoWindow.open(map, marker);
    });

    return marker;
  });
}