jVectorMap latest version(2.0.5) is not working properly with WordPress

Question

On Static HTML, JS, and JQuery, their solution is working fine as documented https://jvectormap.com/maps/world/world/ but when I try to use WordPress and use wp_enqueue_scripts hook for the assets of CSS and JS. The maps aren't rendering. Giving me the console error, which does not seem to be understandable.

Error: <g> attribute transform: Expected number, "…le(0) translate(Infinity, 0)". on the file "jquery-jvectormap-2.0.5.min.js"

(function ($) {
  $(document).ready(function(){
    // $('#map').vectorMap({map: 'world_mill'});
  $('#map').vectorMap({
    map: "world_mill",
    backgroundColor: "#809fff",
    zoomOnScroll: false,
    regionStyle: {
      initial: {
        stroke: "black",
        "stroke-width": 0.3,
        fill: "#fff",
      },
      hover: {
        fill: "#ddd",
        "fill-opacity": 1,
      },
    },
    series: {
      regions: [
        {
          attribute: "fill",
        },
      ],
    }
  });
})
})(jQuery);

wp_enqueue_script('jquery', 'https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.3/jquery.js', '', null, true);
        wp_enqueue_script('jvectormap-jquery', plugin_dir_url(__FILE__) . 'assets/js/jquery-jvectormap-2.0.5.min.js', ['jquery'], null, true);
        wp_enqueue_script('jvectormap-world-mill', plugin_dir_url(__FILE__) . 'assets/js/jquery-jvectormap-world-mill.js', ['jquery'], null, true);
        wp_enqueue_script('wmq-world-map', plugin_dir_url(__FILE__) . 'assets/js/wmq-world-map.js', ['jquery'], null, true);
        wp_enqueue_script('wmq-quiz', plugin_dir_url(__FILE__) . 'assets/js/quiz.js', ['jquery'], null, true);

 <div id="mapWrapper" style="
                text-align: center;
                position: relative;
              ">
                    <div id="points" style="z-index: 2; position: relative"></div>
                    <div id="map" style="width: 950px; height: 450px"></div>
                </div>

I used earlier version of jVectorMap 1.1.1 with some resources from internet and it works fine with wordPress, but the documentation based on updated resources.

Any help will be appreciated...

Answer 1

Try to inspect your elements. The svg element must be having height: 0. Try to give some height to it in inspect element itself(i.e. chrome browser). If after giving height to vectorMap svg, if it is visible, then give some static height. It should work.