How to shorten the Google Maps code if you need to add multiple labels?

Question

JavaScript

Tell me how to shorten the javaScript code so as not to repeat the same thing for each mark on the map (only the coordinates and content of the marks will be different), as well as how to make the icon change to customIconActive when clicked.
Code:

// Set coordinates for points
  var point1 = {lat: 47.649580,	lng: 12.729179};
  var point2 = {lat: 47.651604,	lng: 12.729351};
  var point3 = {lat: 47.654408,	lng: 12.733771};
  var point4 = {lat: 47.652991,	lng: 12.736346};
  var point5 = {lat: 47.645677,	lng: 12.731711};
  var point6 = {lat: 47.653396,	lng: 12.734286};
  var point7 = {lat: 47.648308,	lng: 12.730209};
  var point8 = {lat: 47.654235,	lng: 12.722398};
  var point9 = {lat: 47.647903,	lng: 12.712142};
  var point10 = {lat: 47.644752, lng: 12.718536};

  var customIcon = 'img/map-icon.svg';
  var customIconActive = 'img/map-icon_active.svg';

  var map = new google.maps.Map(document.getElementById('objectsMap'), {
    zoom: 15,
    center: point1,
    mapTypeControl: false,
    streetViewControl: false,
    fullscreenControl: false,
  });
  
  //Associate the styled map with the MapTypeId and set it to display.
  map.mapTypes.set('styled_map', styledMapType);
  map.setMapTypeId('styled_map');

  var marker1 = new google.maps.Marker({
    position: point1,
    map: map,
    icon: customIcon,
  });
  var contentMarker1 = '<a href="#" class="map__objects-info">' +
                '<img src="img/project-img1.jpg" alt="">' +
                '<span class="map__objects-name">Ein zweizeiliger Projektname</span>' +
                '</a>';

  var windowMarker1 = new google.maps.InfoWindow({
    content: contentMarker1,
    pixelOffset: new google.maps.Size(0, 205),
  });
  marker1.addListener('click', function () {
    windowMarker1.open(map, marker1);
    windowMarker2.close(map, marker2);
    windowMarker3.close(map, marker3);
    windowMarker4.close(map, marker4);
    windowMarker5.close(map, marker5);
    windowMarker6.close(map, marker6);
    windowMarker7.close(map, marker7);
    windowMarker8.close(map, marker8);
    windowMarker9.close(map, marker9);
    windowMarker10.close(map, marker10);
  });

  var marker2 = new google.maps.Marker({
    position: point2,
    map: map,
    icon: customIcon,
  });
  var contentMarker2 = '<a href="#" class="map__objects-info">' +
                '<img src="img/project-img2.jpg" alt="">' +
                '<span class="map__objects-name">Ein zweizeiliger Projektname</span>' +
                '</a>';

  var windowMarker2 = new google.maps.InfoWindow({
    content: contentMarker2,
    pixelOffset: new google.maps.Size(0, 205),
  });
  marker2.addListener('click', function () {
    windowMarker2.open(map, marker2);
    windowMarker1.close(map, marker1);
    windowMarker3.close(map, marker3);
    windowMarker4.close(map, marker4);
    windowMarker5.close(map, marker5);
    windowMarker6.close(map, marker6);
    windowMarker7.close(map, marker7);
    windowMarker8.close(map, marker8);
    windowMarker9.close(map, marker9);
    windowMarker10.close(map, marker10);
  });

  var marker3 = new google.maps.Marker({
    position: point3,
    map: map,
    icon: customIcon,
  });
  var contentMarker3 = '<a href="#" class="map__objects-info">' +
                '<img src="img/project-img3.jpg" alt="">' +
                '<span class="map__objects-name">Ein zweizeiliger Projektname</span>' +
                '</a>';

  var windowMarker3 = new google.maps.InfoWindow({
    content: contentMarker3,
    pixelOffset: new google.maps.Size(0, 205),
  });
  marker3.addListener('click', function () {
    windowMarker3.open(map, marker3);
    windowMarker1.close(map, marker1);
    windowMarker2.close(map, marker2);
    windowMarker4.close(map, marker4);
    windowMarker5.close(map, marker5);
    windowMarker6.close(map, marker6);
    windowMarker7.close(map, marker7);
    windowMarker8.close(map, marker8);
    windowMarker9.close(map, marker9);
    windowMarker10.close(map, marker10);
  });

  var marker4 = new google.maps.Marker({
    position: point4,
    map: map,
    icon: customIcon,
  });
  var contentMarker4 = '<a href="#" class="map__objects-info">' +
                '<img src="img/project-img4.jpg" alt="">' +
                '<span class="map__objects-name">Ein zweizeiliger Projektname</span>' +
                '</a>';

  var windowMarker4 = new google.maps.InfoWindow({
    content: contentMarker4,
    pixelOffset: new google.maps.Size(0, 205),
  });
  marker4.addListener('click', function () {
    windowMarker4.open(map, marker4);
    windowMarker1.close(map, marker1);
    windowMarker2.close(map, marker2);
    windowMarker3.close(map, marker3);
    windowMarker5.close(map, marker5);
    windowMarker6.close(map, marker6);
    windowMarker7.close(map, marker7);
    windowMarker8.close(map, marker8);
    windowMarker9.close(map, marker9);
    windowMarker10.close(map, marker10);
  });

  var marker5 = new google.maps.Marker({
    position: point5,
    map: map,
    icon: customIcon,
  });
  var contentMarker5 = '<a href="#" class="map__objects-info">' +
                '<img src="img/project-img5.jpg" alt="">' +
                '<span class="map__objects-name">Ein zweizeiliger Projektname</span>' +
                '</a>';

  var windowMarker5 = new google.maps.InfoWindow({
    content: contentMarker5,
    pixelOffset: new google.maps.Size(0, 205),
  });
  marker5.addListener('click', function () {
    windowMarker5.open(map, marker5);
    windowMarker1.close(map, marker1);
    windowMarker2.close(map, marker2);
    windowMarker3.close(map, marker3);
    windowMarker4.close(map, marker4);
    windowMarker6.close(map, marker6);
    windowMarker7.close(map, marker7);
    windowMarker8.close(map, marker8);
    windowMarker9.close(map, marker9);
    windowMarker10.close(map, marker10);
  });

  var marker6 = new google.maps.Marker({
    position: point6,
    map: map,
    icon: customIcon,
  });
  var contentMarker6 = '<a href="#" class="map__objects-info">' +
                '<img src="img/project-img6.jpg" alt="">' +
                '<span class="map__objects-name">Ein zweizeiliger Projektname</span>' +
                '</a>';

  var windowMarker6 = new google.maps.InfoWindow({
    content: contentMarker6,
    pixelOffset: new google.maps.Size(0, 205),
  });
  marker6.addListener('click', function () {
    windowMarker6.open(map, marker6);
    windowMarker1.close(map, marker1);
    windowMarker2.close(map, marker2);
    windowMarker3.close(map, marker3);
    windowMarker4.close(map, marker4);
    windowMarker5.close(map, marker5);
    windowMarker7.close(map, marker7);
    windowMarker8.close(map, marker8);
    windowMarker9.close(map, marker9);
    windowMarker10.close(map, marker10);
  });

  var marker7 = new google.maps.Marker({
    position: point7,
    map: map,
    icon: customIcon,
  });
  var contentMarker7 = '<a href="#" class="map__objects-info">' +
                '<img src="img/project-img7.jpg" alt="">' +
                '<span class="map__objects-name">Ein zweizeiliger Projektname</span>' +
                '</a>';

  var windowMarker7 = new google.maps.InfoWindow({
    content: contentMarker7,
    pixelOffset: new google.maps.Size(0, 205),
  });
  marker7.addListener('click', function () {
    windowMarker7.open(map, marker7);
    windowMarker1.close(map, marker1);
    windowMarker2.close(map, marker2);
    windowMarker3.close(map, marker3);
    windowMarker4.close(map, marker4);
    windowMarker5.close(map, marker5);
    windowMarker6.close(map, marker6);
    windowMarker8.close(map, marker8);
    windowMarker9.close(map, marker9);
    windowMarker10.close(map, marker10);
  });

  var marker8 = new google.maps.Marker({
    position: point8,
    map: map,
    icon: customIcon,
  });
  var contentMarker8 = '<a href="#" class="map__objects-info">' +
                '<img src="img/project-img8.jpg" alt="">' +
                '<span class="map__objects-name">Ein zweizeiliger Projektname</span>' +
                '</a>';

  var windowMarker8 = new google.maps.InfoWindow({
    content: contentMarker8,
    pixelOffset: new google.maps.Size(0, 205),
  });
  marker8.addListener('click', function () {
    windowMarker8.open(map, marker8);
    windowMarker1.close(map, marker1);
    windowMarker2.close(map, marker2);
    windowMarker3.close(map, marker3);
    windowMarker4.close(map, marker4);
    windowMarker5.close(map, marker5);
    windowMarker6.close(map, marker6);
    windowMarker7.close(map, marker7);
    windowMarker9.close(map, marker9);
    windowMarker10.close(map, marker10);
  });

  var marker9 = new google.maps.Marker({
    position: point9,
    map: map,
    icon: customIcon,
  });
  var contentMarker9 = '<a href="#" class="map__objects-info">' +
                '<img src="img/project-img5.jpg" alt="">' +
                '<span class="map__objects-name">Ein zweizeiliger Projektname</span>' +
                '</a>';

  var windowMarker9 = new google.maps.InfoWindow({
    content: contentMarker9,
    pixelOffset: new google.maps.Size(0, 205),
  });
  marker9.addListener('click', function () {
    windowMarker9.open(map, marker9);
    windowMarker1.close(map, marker1);
    windowMarker2.close(map, marker2);
    windowMarker3.close(map, marker3);
    windowMarker4.close(map, marker4);
    windowMarker5.close(map, marker5);
    windowMarker6.close(map, marker6);
    windowMarker7.close(map, marker7);
    windowMarker8.close(map, marker8);
    windowMarker10.close(map, marker10);
  });

  var marker10 = new google.maps.Marker({
    position: point10,
    map: map,
    icon: customIcon,
  });
  var contentMarker10 = '<a href="#" class="map__objects-info">' +
                '<img src="img/project-img6.jpg" alt="">' +
                '<span class="map__objects-name">Ein zweizeiliger Projektname</span>' +
                '</a>';

  var windowMarker10 = new google.maps.InfoWindow({
    content: contentMarker10,
    pixelOffset: new google.maps.Size(0, 205),
  });
  marker10.addListener('click', function () {
    windowMarker10.open(map, marker10);
    windowMarker1.close(map, marker1);
    windowMarker2.close(map, marker2);
    windowMarker3.close(map, marker3);
    windowMarker4.close(map, marker4);
    windowMarker5.close(map, marker5);
    windowMarker6.close(map, marker6);
    windowMarker7.close(map, marker7);
    windowMarker8.close(map, marker8);
    windowMarker9.close(map, marker9);
  });

Answer 1

We add the marker data into an array of objects - each contains the coordinates and content of the popup:

const markersData = [
  { position: { lat: ..., lng: ... }, content: '...' },
  { position: { lat: ..., lng: ... }, content: '...' },
  ...
];

Popup window - one for all: Create an array of markers:
const infoWindow = new google.maps.InfoWindow();

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

  marker.addListener('click', () => {
    infoWindow.setContent(content);
    infoWindow.open(map, marker);
  });

  return marker;
});

Icon change - let's make a method that will set the active one for the specified marker, and the default for the rest (if you need to reset the current active one, pass null):

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

Everything .