Generate HTML Template

Create an empty modal template. When you need to use it, fill it with the data you need before displaying it. Instead of having 40 modals, you can have in a Javascript variable an array with 40 records that store the information of each modal and simply fill it when you go to display it:

const modalesMapa = [
  { 
    titulo: "Titulo uno",
    iframeSrc: "https://www.google.com/maps/embed ...",
    textoDireccion: ...
  },
 ...
  { 
    titulo: "Titulo cuarenta",
    iframeSrc: "https://www.google.com/maps/embed ...",
    textoDireccion: ...
  }
];

//Función a ejecutar cuando se quiera mostrar el modal.
function rellenarModal(n) {
  const datos=modalesMapa[n];
  document.getElementById('headerModal').innerHtml = datos.titulo;
  document.getElementById('mapa').src = datos.iframeSrc;
  ...
}

This way you will have a much more manageable code.

If you wanted to create more than one modal at the same time, you could do something similar but using a template tag ( <template>) and clone and delete, but it would already be more complex and I think you won't need it.

A simple example, which I hope you can adapt to your modal:

//array con todos los datos
const datosModal = [
  { titulo: 'Titulo 1', texto :'Esto es el texto del modal 1'},
  { titulo: 'Titulo 2', texto :'Esto es el texto del modal 2'},
  { 
    titulo: 'El quijote', 
    texto :'<p>En un lugar de la mancha, de cuyo nombre no quiero acordarme...</p>'
  }
];

//funcion que copia los datos al modal y lo muestra
function copiarDatos(indice) {
   const datos = datosModal[indice];
   document.getElementById('titulo').innerText= datos.titulo;
   document.getElementById('cuerpo-modal').innerHTML = datos.texto;
   document.getElementById('modal').style.display='block';
   document.getElementById('fondo').style.display='block';
}

//a cada botón le asignamos el evento "copiar datos y mostrar modal", en el orden en que están en el HTML.
document.querySelectorAll('.mostrar').forEach((boton,index) => {
  boton.addEventListener('click',() => copiarDatos(index));
});


//el botón "cerrar oculta el modal
document.getElementById('close')
  .addEventListener('click',() => {
    document.getElementById('modal').style.display='none';
    document.getElementById('fondo').style.display='none';
  });

#modal {
  position: relative;
  top: 50px;
  margin-left: auto;
  margin-right: auto;
  background-color: lightgrey;
  width: 300px;
  height: 100px;
  display: none;
  padding: 3px;
  z-index: 50;
}

button#close {
  position: absolute;
  bottom : 2px;
  right: 45%;
}

#modal h4 {
  margin: 5px;
  
}

#fondo {
  opacity: .6;
  background-color: navy;
  position: fixed;
  width: 100%;
  height: 100%;
  top: 0;
  z-index: 10;
  left: 0;
  display: none;
}

<button class="mostrar"> Muestra modal 1</button>
<button class="mostrar"> Muestra modal 2</button>
<button class="mostrar"> Muestra modal 3</button>

<div id="modal">
  <h4 id="titulo"></h4>
  <div id="cuerpo-modal"></div>
  <button id="close">Cerrar</button>
</div>

<div id="fondo"></div>

You must take into account the following:

Generate a template of the modal you need

<div class="modal fade" id="template" tabindex="-1" role="dialog" >
    <div class="modal-dialog" role="document">
      <div class="modal-content">
        <div class="modal-header">
          <h5 class="modal-title" id="titulo"></h5>
        </div>
        <div class="modal-body">
          <div id="cuerpo-modal"></div>
            <span id="direccion"></span>
            <span id="iframeSrc"></span>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
        </div>
      </div>
    </div>
</div>

Create an array of the data you have:

const modalesMapa = [
  { 
    titulo: "Titulo uno",
    iframeSrc: "https://www.google.com/maps/embed ...",
    textoDireccion: "direccion1"
  },
  { 
    titulo: "Titulo cuarenta",
    iframeSrc: "https://www.google.com/maps/embed ...",
    textoDireccion: "direccion2"
  }

The Buttons you add the id of the array that you need to be displayed through in data-idaddition to a class to identify which modal buttons you want the modal to be seen in the example usebtn-modal

<button type="button" class="btn btn-primary btn-modal" data-id="0" >Direccion 1</button>

Finally we capture the click event, update the data and show the modal:

$('.btn-modal').click(function() {

    const datos = modalesMapa[$(this).attr("data-id")];
   $('#titulo').text(datos.titulo);
   $('#iframeSrc').text(datos.iframeSrc);
   $('#direccion').text(datos.textoDireccion);
   $('#template').modal('show');
   $('#template').modal('show');
});

Everything explained returned Code

const modalesMapa = [
  { 
    titulo: "Titulo uno",
    iframeSrc: "https://www.google.com/maps/embed ...",
    textoDireccion: "direccion1"
  },
  { 
    titulo: "Titulo cuarenta",
    iframeSrc: "https://www.google.com/maps/embed ...",
    textoDireccion: "direccion2"
  }
];
$('.btn-modal').click(function() {

	  const datos = modalesMapa[$(this).attr("data-id")];
    $('#titulo').text(datos.titulo);
    $('#iframeSrc').text(datos.iframeSrc);
    $('#direccion').text(datos.textoDireccion);
    $('#template').modal('show');
});

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">

<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>

<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>


<button type="button" class="btn btn-primary btn-modal" data-id="0" >Direccion 1</button>

<button type="button" class="btn btn-primary btn-modal" data-id="1" >Direccion 2</button>

<div class="modal fade" id="template" tabindex="-1" role="dialog" >
    <div class="modal-dialog" role="document">
      <div class="modal-content">
        <div class="modal-header">
          <h5 class="modal-title" id="titulo"></h5>
        </div>
        <div class="modal-body">
          <div id="cuerpo-modal"></div>
            <span id="direccion"></span><br/>
            <span id="iframeSrc"></span>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
        </div>
      </div>
    </div>
</div>

As an idea, you could make a json tree where you develop the html you want to display on your page.

El html se construye dinamicamente a partir de este arbol json, en el cual puedes añadir, modificar o eliminar elementos, etiquetas, estilos, etc..... Así es como trabajan frameworks javascript avanzados como React, que crean una copia del DOM html en un json en la memoria del navegador.

Puedes cambiar la funcion :

function crearArbolHTML(arbolCompleto, idElementoPadre) {
      for (var m = 0; m < arbolCompleto.length; m++) {
        document
          .getElementById(idElementoPadre)
          .appendChild(crearElementoHTML(arbolCompleto[m]));
      }
    }

y poner:

function crearArbolHTML(arbolCompleto, idElementoPadre) {
      for (var m = 0; m < 5; m++) {
        document
          .getElementById(idElementoPadre)
          .appendChild(crearElementoHTML(arbolCompleto[0]));
      }
    }

Puedes ver como se repite el mismo elemento de arbol las veces que quieras. O puedes añadir los elementos que tu quieras siempre que los añadas a los Switch de las opciones y los estilos.

Dejo también un enlace en StackBlitz

    <div id="divDePrueba"></div>

  <script>
    const modalesMapa = [
      {
        titulo: "Modal 1",
        arbolHtml: {
          etiqueta: "div",
          estilos: {
            clases: ["blog-inner"]
          },
          hijos: [
            // Primer hijo, etiqueta <a>
            {
              arbolHtml: {
                etiqueta: "a",
                opciones: {
                  href: "#modal1",
                  "data-toggle": "modal"
                },
                hijos: [
                  // Primer hijo de <a>, etiqueta <img>
                  {
                    arbolHtml: {
                      etiqueta: "img",
                      opciones: {
                        src:
                          "https://i.ytimg.com/vi/PV43t9j8o-E/maxresdefault.jpg",
                        alt: "Mapa"
                      },
                      estilos: {
                        clases: ["img-responsive"]
                      }
                    }
                  }
                ]
              }
            },
            // Segundo hijo, etiqueta <div>
            {
              arbolHtml: {
                etiqueta: "div",
                estilos: {
                  clases: ["desc"]
                },
                hijos: [
                  // Primer hijo de <div>, etiqueta <h3>
                  {
                    arbolHtml: {
                      etiqueta: "h3",
                      hijos: [
                        // Primer hijo de <h3>, etiqueta <a>
                        {
                          arbolHtml: {
                            etiqueta: "a",
                            texto: "Sede Colombia",
                            opciones: {
                              href: "#modal1",
                              "data-toggle": "modal"
                            }
                          }
                        }
                      ]
                    }
                  }
                ]
              }
            }
          ]
        }
      }
    ];

    function crearElementoHTML(elem, padre) {
      var elemento = elem.arbolHtml;
      var nuevoElementoHTML;
      if (elemento.etiqueta === "img") {
        nuevoElementoHTML = new Image(400, 400);
        nuevoElementoHTML.src = "https://i.ytimg.com/vi/PV43t9j8o-E/maxresdefault.jpg"
      } else nuevoElementoHTML = document.createElement(elemento.etiqueta);

      if (elemento.opciones)
        nuevoElementoHTML = añadirOpciones(
          elemento.opciones,
          nuevoElementoHTML
        );
      if (elemento.estilos)
        nuevoElementoHTML = añadirEstilos(elemento.estilos, nuevoElementoHTML);
      if (elemento.texto) {
        var nodoTexto = document.createTextNode(elemento.texto);
        nuevoElementoHTML.appendChild(nodoTexto);
      }
      if (elemento.hijos && elemento.hijos.length > 0) {
        for (var a = 0; a < elemento.hijos.length; a++) {
          var elementoHijo = elemento.hijos[a];
          nuevoElementoHTML.appendChild(
            crearElementoHTML(elementoHijo, elemento)
          );
        }
      }
      return nuevoElementoHTML;
    }

    function añadirOpciones(opciones, elemento) {
      console.log(
        "Object.keys(opciones) =================>>>>>>>>>>",
        Object.keys(opciones)
      );
      for (var i = 0; i < Object.keys(opciones).length; i++) {
        var opcion = Object.keys(opciones)[i];
        switch (opcion) {
          case "href":
            console.log("entra en href");
            elemento.href = opciones.href;
          case "data-toggle":
            elemento["data-toggle"] = opciones["data-toggle"];
          case "src":
            elemento.src = opciones.src;
          case "alt":
            elemento.setAttribute("alt", opciones.alt);
        }
      }
      return elemento;
    }

    function añadirEstilos(estilos, elemento) {
      for (var i = 0; i < Object.keys(estilos).length; i++) {
        switch (Object.keys(estilos)[i]) {
          case "clases":
            for (var x = 0; x < estilos.clases.length; x++) {
              elemento.setAttribute("class", estilos.clases[x]);
            }

        }
      }
      return elemento;
    }

    function crearArbolHTML(arbolCompleto, idElementoPadre) {
      for (var m = 0; m < arbolCompleto.length; m++) {
        document
          .getElementById(idElementoPadre)
          .appendChild(crearElementoHTML(arbolCompleto[m]));
      }
    }
    crearArbolHTML(modalesMapa, "divDePrueba");
  </script>