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?
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