Как динамически добавлять маркеры в страны с помощью jVectorMap

Я хочу динамически устанавливать маркеры над странами в зависимости от широты и долготы страны. Я пытался задать жестко закодированные значения, и у меня это работает нормально, теперь я пытаюсь динамически привязать маркеры. Вот моя функция JavaScript и мой HTML. Мне нужен полнофункциональный пример bea

$(function () {
            $('#db-world-map-markers').vectorMap({
                map: 'world_mill_en',
                scaleColors: ['#3F51B5', '#3F51B5'],
                normalizeFunction: 'polynomial',
                hoverOpacity: 0.7,
                hoverColor: false,
                regionsSelectable: true,
                markersSelectable: true,
                markersSelectableOne: true,
                updateSize: true,
                onRegionOver: function (event, code) {
                    //console.log('region-over', code);
                },
                onRegionOut: function (event, code) {
                    //console.log('region-out', code);
                },
                onRegionClick: function (event, code) {
                    //console.log('region-click', code);
                },
                onMarkerClick: function (event, code) {
                    debugger;
                },
                onRegionSelected: function (event, code, isSelected, selectedRegions) {
                    //console.log('region-select', code, isSelected, selectedRegions);
                    if (window.localStorage) {
                        window.localStorage.setItem(
                            'jvectormap-selected-regions',
                            JSON.stringify(selectedRegions)
                        );
                    }
                },

                panOnDrag: true,

                focusOn: {
                    x: 0.5,
                    y: 0.5,
                    scale: 1.2,
                    animate: true
                },


                regionStyle: {
                    initial: {
                        fill: '#aaaaaa',
                        'fill-opacity': 1,
                        stroke: 'false',
                        'stroke-width': 0,
                        'stroke-opacity': 1
                    },
                    hover: {
                        fill: '#3F51B5',
                        'fill-opacity': 1,
                        cursor: 'pointer'
                    },
                    selected: {
                        fill: '#3F51B5'
                    },
                    selectedHover: {}
                },



                markerStyle: {
                    initial: {
                        fill: '#E91E63',
                        stroke: '#ffffff',
                        r: 5
                    },
                    hover: {
                        stroke: '#FFC107',
                        "stroke-width": 2,
                        cursor: 'pointer'
                    },
                    selected: {
                        fill: '#FFC107',
                        "stroke-width": 0,
                    },
                },
                backgroundColor: '#ffffff',
                markers: [ ]
            });
        });

Вот функция, которую я использую для привязки координат

function addCountryMarkers() {
        var mapMarkers = [];
        var countries = [
             { latLng: [20.59, 78.96], name: 'India' },
             { latLng: [25.35, 51.18], name: 'Qatar' }

        ];
        mapMarkers.length = 0;
        for (var i = 0, l = countries.length; i < l; i++) {
            mapMarkers.push({ latLng: countries[i].latLng, name: countries[i].name });
        }
        map.markers[0].setValues(mapMarkers);
    }

Это мой HTML

<div class="col-xs-12 col-sm-9">
       <figure>
            <div id="db-world-map-markers" style="width: 100%; height: 300px"></div>
       </figure>
</div>