I am facing a similar issue to one discussed here, but with some minor differences. Initially, my map loaded without any problem on the site. However, after adding Angularjs to the site, I noticed a 'small' map issue. It seems like a simple code injection is causing a conflict in the load order.
What's bizarre is that when I resize the browser, eventually the map displays correctly according to the div css. This makes me think it's a load order issue, although simply calling .resize() does not solve it.
Just for context, this issue is occurring on a web server backed by Express and Node.js. The map displayed fine before implementing Angularjs code injection.
Any assistance would be highly appreciated.
Edit: Provided code snippet below. It should be noted that the map loads normally without the ng-include (which includes a list of css files).
<html ng-app class="no-js lt-ie9 lt-ie8 lt-ie7">
<head ng-include="'style.html'">
<script src="vendor/modernizr-2.6.2-respond-1.1.0.min.js"></script>
<script src="js/angular.min.js"></script>
</head>
<body>
<div id="main" class="container">
<div id="content" class="content bg-base section">
<div id="map" class="span10"></div>
</div>
</div>
</body>
<script>
$(function(){ $('#map').vectorMap(
{
map: 'world_mill_en',
backgroundColor: 'transparent',
regionsSelectable: true,
regionsSelectableOne: true,
regionStyle:
{
selected: { fill: 'Red' }
}
});
});
</script>
</html>