0

I want to show Google map inside specific container in ui-booststrap modal using Angularjs. Here is my code :

HTML :

<script type="text/ng-template" id="mapModalContent.html">
    <div class="map-container" ng-class="{'open' : openMapContainer}">
        <div class="header-section">
        header
        </div>
        <div class="close-btn"><i class="icon icon-cancel"></i></div>
        <div id="map-test" class="map-test"></div>
        <div id="map-content"></div>
        <div class="footer-section"></div>
    </div>
</script>

Angular:

    var modalInstance = $uibModal.open({
        templateUrl: 'mapModalContent.html',
        scope: $scope,
        windowClass: 'mapModal',
        size: 'lg',
        resolve: {
            data: function () {
                return $scope;
            }
        }
    });
        modalInstance.opened.then(function() {
            console.log('opened');
        });
    }
    $scope.$watch('data', function(value){
        if(typeof value !== 'undefined') {
            searchLatLng = new google.maps.LatLng($scope.data.latitude, $scope.data.longitude);

             googleMap = new google.maps.Map($element.find('.map-content'), {
                 center: {lat: -34.397, lng: 150.644},
                 zoom: 8
             });
            searchMarker = new google.maps.Marker({
                position: searchLatLng,
                map: googleMap,
                draggable: true
            });
            google.maps.event.addListener(searchMarker, 'dragend', function () {
                scope.$apply(function () {
                    $scope.data.latitude = searchMarker.getPosition().lat();
                    $scope.data.longitude = searchMarker.getPosition().lng();
                });
            }.bind(this));

            var myPosition = new google.maps.LatLng($scope.data.latitude, $scope.data.longitude);
            searchMarker.setPosition(myPosition);
        }
    }, true);
}

In console , I get

opened (for opening modal)

and

enter image description here

Actually , map doesn't load yet. Any suggestion?

Farzan Najipour
  • 2,442
  • 7
  • 42
  • 81

1 Answers1

1

If i understand correctly, there is a gray box.

Can you try this:

modalInstance.opened.then(function() {
    console.log('opened');
     google.maps.event.trigger(googleMap, "resize");
});

Grey boxes appear in parts of embedded Google Map in modal box

Community
  • 1
  • 1
a.u.b
  • 1,589
  • 10
  • 25