Highcharts es una biblioteca de gráficos escrita en JavaScript puro, que ofrece una manera fácil de agregar gráficos interactivos a su sitio web o aplicación web.

Head

Debes colocarlo tres librerías en el dentro de header para poder compilar una mapa.

<script src="https://code.highcharts.com/maps/highmaps.js"></script>
    <script src="https://code.highcharts.com/maps/modules/exporting.js"></script>
    <script src="https://code.highcharts.com/mapdata/countries/co/co-all.js"></script>

style

<style>
    #mapa-container {
        height: 800px;
        max-width: 100%;
        margin: 0 auto;
    }
    .loading {
        margin-top: 10em;
        text-align: center;
        color: gray;
    }
 </style>

HTML

Un componente de div donde se carga una vista de mapa

<div id="mapa-container"></div>

Javascript

<script>

    // Prepare demo data
    // Data is joined to map using value of 'hc-key' property by default.
    // See API docs for 'joinBy' for more info on linking data and map.
    var data = [
      ['co-sa', 0],
      ['co-ca', 1],
      ['co-na', 2],
      ['co-ch', 3],
      ['co-3653', 4],
      ['co-to', 5],
      ['co-cq', 6],
      ['co-hu', 7],
      ['co-pu', 8],
      ['co-am', 9],
      ['co-bl', 10],
      ['co-vc', 11],
      ['co-su', 12],
      ['co-at', 13],
      ['co-ce', 14],
      ['co-lg', 15],
      ['co-ma', 16],
      ['co-ar', 17],
      ['co-ns', 18],
      ['co-cs', 19],
      ['co-gv', 20],
      ['co-me', 21],
      ['co-vp', 22],
      ['co-vd', 23],
      ['co-an', 24],
      ['co-co', 25],
      ['co-by', 26],
      ['co-st', 27],
      ['co-cl', 28],
      ['co-cu', 29],
      ['co-1136', 30],
      ['co-ri', 31],
      ['co-qd', 32],
      ['co-gn', 33]
    ];

    // Create the chart
    Highcharts.mapChart('mapa-container', {
      chart: {
          map: 'countries/co/co-all'
      },

      title: {
          text: 'Reportes de Mapa'
      },

      subtitle: {
          text: 'Un descripción de reportes'
      },

      mapNavigation: {
          enabled: true,
          buttonOptions: {
              verticalAlign: 'top'
          }
      },

      colorAxis: {
          min: 0
      },

      series: [{
          data: data,
          name: 'Población',
          states: {
              hover: {
                  color: '#BADA55'
              }
          },
          dataLabels: {
              enabled: true,
              format: '{point.name}'
          }
      }]
    });

    </script>

Datos de Países

https://code.highcharts.com/mapdata/