Search code examples
angularjsrequirejstypescriptangular-google-maps

angular-google-map-container element is empty after render

I use angular-google-maps with typescript and requirejs. I initialize map with next code:

Requirejs config:

    require.config({
    urlArgs: 'bust=' + (new Date()).getTime(),
    paths: {
         ....
        'maps': '/scripts/angular/angular-google-maps.min',
        'lodash': '/scripts/angular/lodash.min',
        'app': '/app/app'
    },
    shim: {
        ...
        'maps': { deps: ['lodash', 'angular'] },
        'angular-cookies': { deps: ['angular'] }
    }
});

require(['jquery', 'angular', 'bootstrap', 'angular-ui-router', 'angular-cookies', 'maps', 'app'],
    ($: JQueryStatic, angular: ng.IAngularStatic) => {
        $(() => {
            angular.bootstrap(document, ['app']);
        });
    });

index.html

<html xmlns="http://www.w3.org/1999/xhtml">
    ...
    <script src='//maps.googleapis.com/maps/api/js?sensor=false'></script>
    <script src="Scripts/require.js" data-main="/app/config.js"></script>
</body>
</html>

in controller view i a have next layout:

                <div class="row">
                <ui-gmap-google-map center='map.center' zoom='map.zoom' id="myGoogleMap"></ui-gmap-google-map>
            </div>

In controller i have default settings from here

After render page i see next layout:

<ui-gmap-google-map center="map.center" zoom="map.zoom" id="myGoogleMap" class="ng-isolate-scope">
<div class="angular-google-map">
    <div class="angular-google-map-container"></div>
    <div ng-transclude="" style="display: none"></div>
</div>

Threre is google api scripts and angular map directives are initialized, but map not displayed. Why?

Solution

  • I just had the same problem, because I wasn't setting a fixed height to .angular-google-map-container Once I set .angular-google-map-container { height: 350px; }, it starts to show up