jvectormaps in dropdown menu, NS_ERROR_FAILURE:

Question

my jvector maps are in a dropdown menu, it works well in safari, opera and chrome but breaks (no map and error message NS_ERROR_FAILURE:
(line 700 in 2.0.2.min.js "return this.node.getBBox();" in firefox, I've tried lots of different things but no luck.

these are in the head.

<script type="text/javascript" src="jVectormap/jquery-jvectormap-2.0.2.min.js"></script>
<script type="text/javascript" src="../maCountries/be_coord.js"></script>
<script type="text/javascript" src="../maCountries/be_map.js"></script>

this is the html in the dropdown menu

<div id="mapJV">
</div> <!--mapjv container-->

This is the code in be_map.js which breaks in firefox.

$(function() {
var map,
map = new jvm.Map({
container: $('#mapJV'),
map: 'be_mill_en',
backgroundColor:  '#F6F3EF',
regionStyle: {
  initial: {
   fill: '#ABBDC4'
  },
},


});

});
$( "<style>.jvectormap-container {width : 400px; height: 400px;}</style>" ).appendTo( "head" );

the code in be_coord.js is just the normal coordinates.

Answer 1

Firefox usually has trouble with rendering SVG inside of the hidden elements. So solution here could be creating and rendering map after its container getting visible.