Im using NgMap to produce a map inside a modal in my Angular application. The modal is generated with the $modal -injector in a controller and using a template view to build the html code.
The first time the modal show up it works perfectly. Although, the second time the map is completely messed up. It is showing bits of the map and the rest is covered with a grayish color.
Here's is what initializing the modal
$modal.open({
templateUrl: 'views/partials/modals/storeShowModal.html',
controller: 'ModalShowStore',
resolve: {
store: function() {
return store;
}
}
});
Here's the modal controller
appControllers.controller('ModalShowStore', ['$scope', '$modalInstance', 'store', 'NgMap', function ($scope, $modalInstance, store, NgMap) {
$scope.center = store.latitude+","+store.longitude;
$scope.position = store.latitude+","+store.longitude;
NgMap.getMap().then(function(map) {});
$scope.store = store;
$scope.cancel = function () {
$modalInstance.close();
};
}]);
And this is the template html
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" data-ng-click="cancel()" aria-hidden="true">×</button>
<h4 class="modal-title text-align-center fw-bold mt" id="myModalLabel18">{{ store.name }}</h4>
</div>
<div class="modal-body bg-gray-lighter">
<div class="row">
<div class="col-md-12">
<ng-map center="{{ center }}" zoom="15">
<marker position="{{ position }}"></marker>
</ng-map>
</div>
</div>
</div>
Any ideas, thought whatever are very welcome. I guess it got something to do with the dynamically load of html. Thanx.
EDIT
As requested, here's my quite large bower.json
{
"name": "sing",
"version": "1.1.1",
"description": "Sing Dashboard App",
"main": "index.html",
"authors": [
"okendoken flatlogic.com"
],
"dependencies": {
"jquery": "~2.1.3",
"jquery-pjax": "~1.9.4",
"bootstrap-sass": "3.3.4",
"font-awesome": "~4.3.0",
"bootstrap-select": "~1.6.3",
"select2": "~3.5.2",
"select2-bootstrap-css": "~1.4.6",
"jasny-bootstrap": "~3.1.3",
"slimScroll": "~1.3.3",
"widgster": "~0.0.2",
"pace.js": "git://github.com/HubSpot/pace.git#v0.7.1",
"animate.css": "~3.2.0",
"jquery-touchswipe": "~1.6.8",
"awesome-bootstrap-checkbox": "~0.3.3",
"angular": "1.6.3",
"angular-ui-router": "~0.2.13",
"ngstorage": "~0.3.0",
"angular-ui-utils": "bower-event",
"angular-bootstrap": "2.5.0",
"angular-animate": "1.6.3",
"angular-bootstrap-select": "~0.0.5",
"angular-datatables": "0.4.2",
"angular-resource": "~1.3.14",
"angular-ui-calendar": "~0.8.1",
"backbone": "~1.1.2",
"backbone.paginator": "~2.0.2",
"backgrid": "~0.3.5",
"backgrid-paginator": "03632df8ad238e3d043c0fd471a6c78494e1bdfc",
"jquery.sparkline": "http://omnipotent.net/jquery.sparkline/2.1.2/jquery.sparkline.min.js",
"d3": "~3.5.4",
"rickshaw": "~1.5.1",
"nvd3": "~1.7.1",
"morris.js": "~0.5.1",
"flot": "~0.8.3",
"flot.animator": "https://github.com/Codicode/flotanimator.git#3c256c0183d713fd3bf41d04417873928eb1a751",
"flot-orderBars": "https://github.com/emmerich/flot-orderBars.git#d44ff4f2fec4c8bb1254e59567ee39fa3684372e",
"jquery-autosize": "~1.18.17",
"bootstrap3-wysihtml5": "git://github.com/schnawel007/bootstrap3-wysihtml5.git#5f07036cb228c1cc8bab2d271701ceff0de66828",
"switchery": "~0.7.0",
"eonasdan-bootstrap-datetimepicker": "~3.1.3",
"mjolnic-bootstrap-colorpicker": "~2.0.1",
"holderjs": "~2.5.0",
"dropzone": "~4.0.0",
"jQuery-Mapael": "https://github.com/neveldo/jQuery-Mapael.git#v0.7.1",
"gmaps": "~0.4.16",
"markdown": "~0.5.0",
"to-markdown": "~0.0.3",
"bootstrap-markdown": "~2.8.0",
"seiyria-bootstrap-slider": "~4.4.2",
"bootstrap_calendar": "~1.0.1",
"jvectormap": "http://jvectormap.com/binary/jquery-jvectormap-1.2.2.zip",
"jvectormap-world": "http://jvectormap.com/js/jquery-jvectormap-world-mill-en.js",
"parsleyjs": "~2.0.7",
"twitter-bootstrap-wizard": "git://github.com/VinceG/twitter-bootstrap-wizard.git#62a9aca8cc61fdb496c4bf7b92e1ff70c698667e",
"bootstrap-application-wizard": "git://github.com/amoffat/bootstrap-application-wizard.git#3768da3142f43428c5f63284407a2481a9e283d3",
"jquery-ui": "~1.11.2",
"jquery-ui-touch-punch": "git://github.com/furf/jquery-ui-touch-punch.git#4bc009145202d9c7483ba85f3a236a8f3470354d",
"datatables": "~1.10.4",
"jquery.nestable": "git://github.com/dbushell/Nestable.git#4f93032cfafe2002f24ed6bd7dc1510931498503",
"messenger": "~1.4.1",
"jquery.easy-pie-chart": "~2.1.6",
"fullcalendar": "~1.6.7",
"shufflejs": "~3.0.2",
"magnific-popup": "~1.0.0",
"jquery-animateNumber": "https://github.com/aishek/jquery-animateNumber.git#v0.0.10",
"MetroJS": "https://github.com/drewgreenwell/MetroJS.git#b70806b32e070073c17677402e64ed909e24a6ef",
"skycons": "https://github.com/darkskyapp/skycons.git#60d41374ea97c5da1f92622ddcecca6dd1d9beed",
"ngmap": "^1.18.0",
"angular-ui-select2": "^0.0.5"
},
"private": true,
"ignore": [
"**/.*",
"vendor"
],
"resolutions": {
"jquery": "~2.1.3",
"d3": "~3.5.4",
"underscore": ">=1.5.0",
"bootstrap": "~3",
"angular": "~1.3.14",
"bootstrap-select": "~1.6.3",
"jquery-ui": "~1.11.2"
}
}
UPDATE
The problem persist when not using a modal but just a div instead. When I hide the div and show it again the map is all grayed out. The funny thing is though when I open up Chrome's console the map shows up.
Try to explicitly invoke resize event once the map is initialized:
NgMap.getMap().then(function (map) {
google.maps.event.trigger(map, "resize");
});
Example
angular.module('app', ['ngMap', 'ui.bootstrap'])
.controller('myCtrl', function ($scope, $uibModal) {
$scope.showModal = function () {
$scope.modal = $uibModal.open({
templateUrl: 'storeShowModal.html',
controller: 'ModalShowStore',
resolve: {
store: function () {
return { "latitude": 51.5285578, "longitude": -0.242023 };
}
}
});
};
$scope.closeModal = function () {
$scope.modal.close();
};
})
.controller('ModalShowStore', function ($scope,$uibModalInstance, NgMap, store) {
$scope.center = [store.latitude,store.longitude];
$scope.position = [store.latitude,store.longitude];
NgMap.getMap().then(function (map) {
google.maps.event.trigger(map, "resize");
});
$scope.store = store;
$scope.cancel = function () {
$uibModalInstance.close();
};
}); <script data-require="angularjs@1.6.2" data-semver="1.6.2" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.2/angular.js"></script>
<script data-require="angularjs-google-maps@1.13.14" data-semver="1.13.14" src="https://rawgit.com/allenhwkim/angularjs-google-maps/master/build/scripts/ng-map.js"></script>
<script data-require="ui-bootstrap@2.5.0" data-semver="2.5.0" src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/2.5.0/ui-bootstrap-tpls.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://maps.google.com/maps/api/js"></script>
<div ng-app="app">
<script type="text/ng-template" id="storeShowModal.html">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" data-ng-click="cancel()" aria-hidden="true">×</button>
<h4 class="modal-title text-align-center fw-bold mt" id="myModalLabel18">{{ store.name }}</h4>
</div>
<div class="modal-body bg-gray-lighter">
<div class="row">
<div class="col-md-12">
<ng-map center="{{ center }}" zoom="10">
<marker position="{{ position }}"></marker>
</ng-map>
</div>
</div>
</div>
</script>
<div ng-controller="myCtrl">
<div>
<button ng-click="showModal()">Show Modal</button>
</div>
</div>
</div>