I'm trying to add google geomap to gridster item using directive, but when resizing i'm unable to get new width and height of the gridster. And also losing height and width when reloading page. I'm getting correct width and height when loaded for the first time.
<li gridster-item="item" indexId='{{$index}}' ng-repeat="item in createdCharts track by $index" class='chart-container-grey' ng-init='chartIndex = $index' style='height:100%;' >
<div geomap item="item" style="width: 100%; height: 100%;" ></div>
</li>
myapp.directive('geomap', function() {
return {
scope: {
item: "=" //gridster item
},
restrict: 'A',
link: function(scope, $elm, $attr) {
// Create the data table.
var container = $elm.get(0);
google.charts.load('upcoming', {'packages':['geomap']});
google.charts.setOnLoadCallback(function() {
var data = new google.visualization.arrayToDataTable([
['Country', 'Popularity'],
['Germany', 200],
['United States', 300],
['Brazil', 400],
['Canada', 500],
['France', 600],
['RU', 700]
]);
// Set chart options
console.dir($elm.context.offsetWidth);
var options = {};
options['dataMode'] = 'regions';
options['width'] =$elm.parent()[0].offsetWidth+10+"px";
options['height'] =$elm.parent()[0].offsetHeight+10+"px";
// Instantiate and draw our chart, passing in some options.
var geomap = new google.visualization.GeoMap(container);
geomap.draw(data, options);
});
scope.$on('gridster-resized', function(sizes, gridster) {
console.dir(sizes);
console.dir(gridster);
})
}
}
});