Jqvmap width issue with ionic


#1

I’m building a mobile app that has only the jqvmap plugin on the main page but this weird bug keeps happening, sometimes the map is displayed correctly but sometimes it’s not (image bellow).

here’s my code :

<ion-view title="Trouver du fret" style="background-color: #F7F7F7">
	
	<div class="MapContainer" style="width:100%;padding-top: 60px;" >
		
		 <label class = "item item-input item-select">
		   <div class = "input-label" style="white-space: normal;">
		    Choisissez votre région
		   </div>
			
			<select ng-model="selectedRegion" ng-change="gotoRegion(selectedRegion)">
			 	<option value="0"> --  </option>
			    <option ng-repeat="reg in allRegions" value="{{reg.Region.id}}">
			    	{{reg.Region.name}}
			    </option>
			</select>
		 </label>
		 <div class="card">
            <div class="item item-text-wrap" id="francemap" style=" height: 450px;"></div>
         </div>	 
	</div>
</ion-view>

and the function that i use to draw the map is launched on the '$ionicView.loaded' event :

$('#francemap').vectorMap({
		    map: 'france_fr',
			hoverOpacity: 0.5,
			hoverColor: "#0DC12D",
			backgroundColor: "#fff"  , //  "#F7F7F7",
			color: "#27ae60",
			borderColor: "#000000",
			selectedColor: "#0DC12D",
			enableZoom: false,
			showTooltip: true,
			onResize: function (element, width, height) {
		        console.log('Map Size: ' +  width + 'x' +  height);
		      },
		    onRegionClick: $scope.regionClick
		});

So what i am supposed to have is the picture on the right but i am getting the map cropped as shown in the picture on the left