Twitter Bootstrap Question posted in

NgMap (Google map) inside a modal – not showing the second time – Twitter bootstrap

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">&times;</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.

Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    I found a very, very cheap solution and it's not nearly as I wanted it in the first place but it'll work for now. If the height is changed the map will be able to show itself. Why class="hidden" 's not, or style="display:none", I have no idea... Well, so this will work:

    $scope.openMap = function (id) {
    var map = document.getElementById('map' + id);

    if (map.style.height == '400px') {
        map.style.height = '0px';
    } else {
        map.style.height = '400px';
    }
}

  2. 0

    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="[email protected]" data-semver="1.6.2" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.2/angular.js"></script>
  <script data-require="[email protected]" data-semver="1.13.14" src="https://rawgit.com/allenhwkim/angularjs-google-maps/master/build/scripts/ng-map.js"></script>
  <script data-require="[email protected]" 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">&times;</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>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search